jQuery的切換的動畫（與圖像太）

1）一個div內的圖像 - 撥動src屬性

2）絕對定位的div - 撥動animate("top":"0px")位

這裏的HTML

<div id="emailme"> 
    <a id="email" href="mailto:[email protected]">[email protected]</a> 
    <div id="emailmecopy">email me</div> 
    <img id="emaildown"src="images/downbutton.png"> 
</div>

現在我排序的SRC來回切換，但不能工作如何切換動畫位：

$("#emailme img").on({ 
     'click': function() { 
     var src = ($(this).attr('src') === 'images/downbutton.png') 
       ? 'images/upbutton.png' 
       : 'images/downbutton.png'; 
      $(this).attr('src', src); //THIS TOGGLES THE IMAGE SRC 

      //BUT WHAT DO I PUT HERE TO TOGGLE ANIMATE BETWEEN ("top":"0px") and 
      //("top":"-50px") IN THE SAME CLICK?? 

        } 
});

任何幫助非常感謝！

來源

2012-10-18 Benji Lanyado

if($("#emailme img").css('top') == '0px'){ 
    $("#emailme img").stop().animate({top:'-50px'},1000); 
}; 
if($("#emailme img").css('top') == '-50px'){ 
    $("#emailme img").stop().animate({top:'0px'},1000); 
};

還檢查了這一點：

$('body').on('click', '#emailme img', function (e){ 
    $(this).attr('src', $(this).attr('src')=='images/downbutton.png'?'images/upbutton.png':'images/downbutton.png'); 
    if($(this).css('top') == '0px'){ 
    $(this).stop().animate({top:'-50px'},1000); 
    }; 
    if($(this).css('top') == '-50px'){ 
    $(this).stop().animate({top:'0pg'},1000); 
    }; 
});

來源

2012-10-18 22:10:57

大......這是做切換動畫，謝謝...但是，圖像的src切換現在不起作用，把你的代碼放在它下面！ –

劃痕，我有一些舊的代碼篡改它。解決了！非常感謝，非常感謝....多年來一直盯着它！ –

我很高興幫助你，我在同一時間開心:) –

如果你稍微重構你的代碼，你可以這樣做。我想這就是你要找的人...

$("#emailme img").on({ 
    'click': function() { 

    var $this = $(this); 
    var src = $this.attr('src'); 
    var isUp = src === 'images/upbutton.png'; 
    var newSrc = 'images/'+ (isUp ? 'downbutton' : 'upbutton') +'.png'; 

    $this.attr('src', newSrc) 
     .animate({ top: (isUp ? '-50' : '0') +'px' }); 

    } 
});

來源

2012-10-18 22:07:53 elclanrs

感謝，這是偉大的太... –

jQuery的切換的動畫（與圖像太）

回答

相關問題