JQuery切換加/減按鈕圖標和點擊動畫圖片

Question

我有一個div包含列表項，一張照片和div底部的加號/減號圖標。

列表項目絕對位於照片後面。當我點擊加號按鈕時，我希望它變爲負值，並從頂部顯示29px的照片，顯示後面的列表項。然後，我想單擊減號按鈕，將其更改回加，並將照片動畫返回到頂部。

我試圖完成一些與您在Kyanmedia.com上看到的內容非常相似的內容。除了它們的圖像在懸停時向下和向上生成動畫。我希望我的圖像可以動畫下來，然後點擊並切換正/負圖像。我試過這個，但它不起作用。

$(document).ready(function() { 
    $('#btn_switch').click(function() { 

     $(this).addClass('on') 
     $('.photo').animate({ top: '29px'}, 500); 

     }, function() { 
     $(this).removeClass('on') 
     $('.photo').animate({ top: '0px'}, 500); 

    }); 
}); 

Answer 1

你應該用「切換」，而不是點擊（）：

$(document).ready(function() { $('#btn_switch').toggle(
    function() { /*show*/ }, 
    function() { /*hide*/ } 
);}); 

http://api.jquery.com/toggle-event/

Answer 2

我不是很肯定，如果我正確地理解你的問題，但我會盡力回答盡我所能。如果你想有一個形象的動畫了比了下去onClick事件之後，這應該工作：

$(document).ready(function(){ 
    $('#btn_switch').click(function() { 
    $('.photo').animate({ top: '29px'}, 500); 
    $('.photo').animate({ top: '0px'}, 500); 
    }); 
}); 

有關切換一個加號和減號形象的一部分，你可以更好解釋一下嗎？

編輯：我想我明白你的意思。我曾經在我的網站的代碼來打開和關閉抽屜：

var oddClick = true; 
$("#btn_switch").click(function() { 
$(".photo").animate({top: (oddClick) ? "0px" : "29px"},500); 
    if(oddClick){ 
      $("#btn_switch").html("-"); 
     } 
    else{ 
       $("#btn_switch").html("+"); 
     } 
    oddClick = !(oddClick); 

編輯III：下面是一個使用.toggle方法相同的解決方案：

首先，如果你有多個btn_switch和照片實例你應該使用類不IDS

$("*").mouseover(function(){ 
    $(this).addClass("Active"); 
}); 

$("*").mouseout(function(){ 
    $(this).removeClass("Active"); 
}); 

$(".btn_switch.Active").toggle(function(){ 
     $(".photo.Active").animate({top:29}, 500); 
     $(".btn_switch.Active").html("-"); 
     }, 
     function(){ 
     $(".photo.Active").animate({top:0}, 500); 
     $(".btn_switch.Active").html("+"); 
     }); 

第一部分添加類活動，以什麼鼠標懸停所以只有一個Active btn_switch將切換任何東西。這是假設Plus/Minus按鈕超過.photo，否則照片將不會有一個活動類附加到它。