当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Can I slow down this Javascript function?

问题描述:

I'm new to javascript and jquery, so please forgive my ignorance. I created a webpage where you rollover a text link and an image in another div changes. I used the method from here: http://jsfiddle.net/fWpJz/1/ to create my page and it works well.

Here is the code I'm using:

$(document).ready(function () {

$('.productmenu a').hover(function () {

$('#prodimage img').attr('src', $(this).data('image-src'));

$('.image-src').stop().animate({.attr}, slow);

});

});

I'd like to slow down the transition from one image to another on mouse over, so that the image doesn't flip as abruptly.

I used this tutorial (http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/) to create an effect that I like, but don't know how to combine it with the image changes based on a link hover. Here is the code from the jsfiddle.net:

$(document).ready(function () {

$('.menu a').hover(function () {

$('#container img').attr('src', $(this).data('image-src'));

});

});

Can anyone point me to the correct piece of code and how I can add it into my javascript? I've never used jquery before, so I don't know how to add an animate function.

Thank you!!

网友答案:

What if I told you you didn't have to use jQuery.animate at all to achieve the effect you want? Use CSS3 transitions! Here's a forked version of your fiddle showing how to accomplish what you're looking to do (I think) (I've put the html/css/js at the bottom of this post as well).

When the DOM content has loaded, the alignItems function makes sure that all images stay in the same place on the page. The script keeps track of the current image being displayed. Every time a different link is moused over, the image being displayed gets updated, such that the old current image gets its opacity set to 0 and the new current image gets its opacity set to 1. Then CSS transitions can be used to animate the opacity, which blows away $.fn.animate, but will only work on modern browsers (see caniuse...motherf***ing IE -_- ). Code below:

html

<div class="menu">
  <a href="#" data-image-id="1">link 1</a>
  <a href="#" data-image-id="2">link 2</a>
  <a href="#" data-image-id="3">link 3</a>
  <a href="#" data-image-id="4">link 4</a>
  <a href="#" data-image-id="5">link 5</a>
</div>

<div id="container">
  <img id="1" src="http://farm7.staticflickr.com/6092/6330704947_dd7e1b453c_t.jpg" />
  <img id="2" src="http://farm1.staticflickr.com/13/15463218_8651d51b21_t.jpg"/>
  <img id="3" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_t.jpg" />
  <img id="4" src="http://farm4.staticflickr.com/3036/2975303180_86c4858b2b_t.jpg" />
  <img id="5" src="http://farm7.staticflickr.com/6216/6240217938_aeed84634a_t.jpg" />
</div>

css

.menu a {
  padding: 2px 4px;
  color: #555;
  text-decoration: none;
}

.menu a:hover {
  color: #ddd;
  background: #333;
}

#container {
  margin-top: 10px;
}

#container img {
  margin: 4px;
  padding: 4px;
  border: 1px dashed #aaa;
  opacity: 0;
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
}

javascript

$(document).ready(function () {
  alignImages();

  var currentImgId = 0;
  $('.menu a').hover(function () {
      var oldImgId = currentImgId;
      currentImgId = this.dataset.imageId;
      $(document.getElementById(oldImgId)).css('opacity', 0);
      $(document.getElementById(currentImgId)).css('opacity', 1.0);
  });
});

function alignImages() {
  var $images = $('#container img');
  var position = $images.eq(0).position();
  $images.each(function() {
    this.style.position = 'absolute';
    this.left = position.left;
    this.top = position.top;
  });
}
网友答案:

Below is one of the implementations by using setTimeout

var count = 0;
$(document).ready(function () {
    $('.menu a').hover(function () {
        var self = this;
        var innerCount = ++count;
        setTimeout(function(){
            if(innerCount == count) //If mouse move out within 1 second, will not show new image
            {
                $('#container img').attr('src', $(self).data('image-src'));
            }
        }, 1000); //1 second delay
    });
});
网友答案:

Try this:

your HTML should be like this:

<div id="container" style="display:none;">
  <img src="">
</div>

and in your script :

$('.menu a').hover(function () {
        $('#container').hide();

        $('#container').fadeIn().animate({ opacity: 1, top: "-10px" }, 'slow');

        $('#container img').attr('src', $(this).data('image-src'));
    });

Effect should be nice in transition See: JSFiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: