動畫點擊切換

Question

當我點擊（在示例中點擊切換）時，我創建了一個div動畫。當我再次單擊時，我想要動畫到初始位置。 （？我嘗試用一​​個變量，如果，它不工作，也許還有另一種更簡單的方法或有任何錯誤）

請檢查你的答案在這裏：http://jsfiddle.net/uXVxH/2/

HTML：

<div id="logo"></div> 

CSS：

#logo { 
    position:fixed; 
    bottom:-40px;left: 5%; 
    width:70px; height:80px; 
    background:blue; 
    cursor:pointer; 
} 

JQUERY：

$(function(){ 
    /* CLICK simple 
    $("#logo").click(function() { 
     $("#logo").animate({bottom: "0"}, 1200) 
    }); 
    */ 

    /*click toggle ?*/ 
    var hidden = true; 
    $("#logo").click(function() { 
     if (hidden) { 
     $("#logo").animate({bottom: "0"}, 1200); 
     } else { 
     $("#logo").animate({bottom: "-40"}, 1200); 
     } 
     state = !hidden; 
    }); 

}) 

Answer 1

你的例子是工作，但你做了一個小錯誤變化state爲hidden變量。

var hidden = true; 
$("#logo").click(function() { 
    if (hidden) { 
    $("#logo").animate({bottom: "0"}, 1200); 
    } else { 
    $("#logo").animate({bottom: "-40"}, 1200); 
    } 
    hidden = !hidden; 
}); 

Answer 2

試試這個：

var hidden = true; 
$("#logo").click(function() { 
    var bottom = hidden ? "0" : "-40"; 
    $(this).stop().animate({bottom: bottom}, 1200); 
    hidden = !hidden; 
}); 

FIDDLE DEMO

Answer 3

試試這個：

CSS

#logo { 
    position:fixed; 
    bottom:-40px;left: 5%; 
    width:70px; height:80px; 
    background:blue; 
    cursor:pointer; 
    transition: all 0.5s; 
} 

.long { 
    bottom: 0 !important; 
    transition: all 0.5s; 
} 

JS

$(function(){ 
    $("#logo").click(function() { 
     $(this).toggleClass('long'); 
    }); 
}); 

JS fiddle link