0

jQueryの2つの異なるファイル間でマウスオーバーすると画像がパルスする効果を作ろうとしています。冒頭は書いてありますが、実際のアニメーション部分で苦戦中です。

これが私がこれまでに持っているものです。画像が次の画像にフェードインしてからフェードバックするように指示する何かを書く必要があることはわかっています。お時間をいただきありがとうございます。

(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);

複数の画像に簡単に適用できる、これに似たようなことをしたいと思っています.1つのexample_off.jpgとexample_on.jpgの2つの画像があります。

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変数と交換し、fadeOut および fadeIn 操作を順番に実行することができます。

于 2013-12-30T03:57:58.273 に答える