0

一定期間にわたって不透明度がスムーズに変化するように画像を取得しようとしています。これが私が持っているコードです。

<script type="text/javascript">
pulsem(elementid){
    var element = document.getElementById(elementid)
    jquery(element).pulse({opacity: [0,1]}, 
{    duration: 100, // duration of EACH individual animation    
     times: 3, // Will go three times through the pulse array [0,1]   
     easing: 'linear', // easing function for each individual animation    
     complete: function() {        alert("I'm done pulsing!");    }
})
</script>


<a href="city.htm"><img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/></a>

また、これをマウスオーバーなしで自動的に行う方法はありますか？ありがとう。

4

4 に答える 4

4

私はあなたのコードがjQueryパルスプラグイン用であると仮定しています: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

上記のコードが機能しない場合は、「jquery」を「jQuery」に修正してください。

ページの読み込み時に開始するには、次のようにします。

jQuery(function() {
jQuery('#yourImageId').pulse({
    opacity: [0,1]
}, {
     duration: 100, // duration of EACH individual animation
     times: 3, // Will go three times through the pulse array [0,1]
     easing: 'linear', // easing function for each individual animation
     complete: function() {
         alert("I'm done pulsing!");
    }
});

画像に ID を追加すると、ゴールデンになります。});

于 2010-06-09T18:39:27.443 に答える
2

自分でアニメーションを起動するには:

pulsate( $('#waterloo') );

継続的に脈動するようにコードを修正しました（これがあなたが求めているものかどうかはわかりませんでした）-脈動効果はそれ自体の関数に追いやられているため、直接またはイベントハンドラーで呼び出すことができます

<script type="text/javascript">
  $(function() { // on document ready
     $('#waterloo').hover( //hover takes an over function and out function
       function() {
         var $img = $(this);
         $img.data('over', true); //mark the element that we're over it
         pulsate(this); //pulsate it
       },
       function() {
          $(this).data('over', false); //marked as not over
       });
  });

 function pulsate(element) {
    jquery(element).pulse({opacity: [0,1]}, // do all the cool stuff
        {    duration: 100, // duration of EACH individual animation    
             times: 3, // Will go three times through the pulse array [0,1]   
             easing: 'linear', // easing function for each individual animation    
             complete: function() {  
                 if(  $(this).data('over') ){ // check if it's still over (out would have made this false)
                     pulsate(this); // still over, so pulsate again
                 }
         }});
  } 


<a href="city.htm"><img src="waterloo.png" border="0" class="env" id="waterloo"/></a>

注 - イベントをトリガーするには、.trigger()またはヘルパー関数を使用できます。

$('#waterloo').mouseover() // will fire a 'mouseover' event

また

$('#waterloo').trigger('mouseover');
于 2010-06-09T18:42:13.777 に答える
1

私は個人的にこのようなことをして、マウスが画像の上に置かれたときにパルスし、マウスアウトで完全な不透明に戻ります...

$(document).ready(function () {

    function Pulse(Target, State) {
        //Every 750ms, fade between half and full opacity
        $(Target).fadeTo(750, State?1:.5, function() {Pulse(Target, !State)});
    }

    $("#ImageId").hover(function () {
        $(this).stop()
        Pulse(this);
    }, function () {
        $(this).stop(false, true).fadeTo(200, 1); //200ms to return to full opacity on mouse out
    });
});
于 2013-08-13T01:32:04.470 に答える
1

これはあなたが探しているものかもしれません。

http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/

于 2012-04-05T13:52:58.737 に答える