使用jquery將動畫圖像恢復到原始位置

Question

我試圖在鼠標懸停時將圖像製作爲動畫，並在鼠標離開時將其恢復到原始位置，圖像會生成動畫但鼠標離開之前。

這裏是我的代碼

$(document).ready(function(){ 
    $('.logo').mouseenter(function(){ 
     $('.logo').animate({left: "100px"}); 
    }); 

    $('.logo').mouseout(function(){ 
     $('.logo').animate({right: "100px"}); 

    }); 
}); 

Answer 1

您可以使用-=遞減基於它的當前值的屬性。請注意，您需要在left屬性上執行此操作，因爲right是元素距包含元素右側的距離，並且不是要設置的正確值。您也可以使用hover()方法使代碼更加簡潔。試試這個：

$('.logo').hover(function() { 
    $(this).animate({ left: "100px" }); 
}, function() { 
    $(this).animate({ left: "-=100px" }); 
}); 

另外請注意，你可以實現你在CSS需要單獨使用:hover僞選擇和transition。試試這個：

.logo { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid #C00; 
 
    position: absolute; 
 
    transition: left .25s; 
 
    left: 0; 
 
} 
 
.logo:hover { 
 
    left: 100px; 
 
}

<div class="logo">I am a logo!</div>

Answer 2

在mouseenter事件回調的left關鍵字無法帶出運動動畫的方向，您可以用運動的相反方向上的相同尺寸復位，但元素上的left CSS屬性的新值。

在mouseout你應該left CSS屬性重置爲初始值（可能爲0，你的情況）：

$(document).ready(function(){ 
    $('.logo').mouseenter(function(){ 
     $('.logo').animate({left: "100px"}); 
    }); 

    $('.logo').mouseout(function(){ 
     $('.logo').animate({left: "0px"}); 
    }); 
}); 

但是，正如羅裏在他的回答中寫道，就可以實現這個動畫，而無需使用JavaScript的，只有CSS。