0

我试图在鼠标悬停在jQuery中两个不同文件之间的图像脉冲上产生效果。我已经写好了开头，但我正在努力处理实际的动画部分。

这是我到目前为止所拥有的。我知道我需要写一些东西来告诉图像淡入下一个图像然后淡出。在此先感谢您的时间。

(function($) {
    $(document).ready(function() {
        window.pulse_image = null;
        window.pulse_continue_loop = false;

        $('.pulse').mouseover(function() {
            // User is hovering over the image.
            window.pulse_continue_loop = true;
            window.pulse_image = $(this);

            PulseAnimation(); // start the loop     
        }).mouseout(function() {
            window.pulse_continue_loop = false;
            window.pulse_image.stop();
        });
    });
})(jQuery);

我希望做类似的事情，它可以很容易地应用于多个图像 - 有两个图像，一个 example_off.jpg 和 example_on.jpg。

jQuery(function(){
            $(".img-swap").hover(
                function(){this.src = this.src.replace("_off","_on");},
                function(){this.src = this.src.replace("_on","_off");
            });
        });
4

1 回答 1

0

好吧，您不一定需要插件来执行此操作。假设您有一个图像标签，例如

<img id = "image" src = "/path/to/front_image" data-alternate = "/path/to/back_image" width = "50" height = "50" />

您可以将data属性设置为保存备用图像的路径，并实现类似的交换

//bind mouse events to image element with a given function
$("img#image").on("mouseover", function(e){
                imageSwap($(e.currentTarget));  
               })
               .on("mouseout", function(e){                 
                 imageSwap($(e.currentTarget));
               });

function imageSwap(image){
   //get the alternate source image as a placeholder
   var newSource = image.data("alternate"); 

   //save the image's current source in the data attribute
   image.data("alternate", image.attr("src"));

   //execute fadeOut operation of the image
   image.fadeOut("fast", function(e){

     //replace the image source attribute with the new image source
     image.attr("src") = newSource;

     //execute the fadeIn operation to show the new image
     image.fadeIn("fast");
   }); 
}

这允许您将mouseover和mouseout事件绑定到单个函数，该函数将图像源属性与data变量交换并按顺序执行淡出和淡入操作。

于 2013-12-30T03:57:58.273 回答