jQuery動畫的按鈕

Question

我想找到一些信息如何使「共享」按鈕，如here。我發現有可能在按鈕上產生如此多的效果，但我不知道如何調用這種效果以及如何實現。如果您有關於此按鈕效果的任何信息，將非常感激。

Answer 1

非常簡單的方法演示：https://jsfiddle.net/1ccyn/gyu2s2ae/

$("#left").mouseover(function(){ 
     $(this).animate({width:'100%'}); 
     $("#right").animate({width:'0%'}); 
    }) 
    $("#right").mouseover(function(){ 
     $(this).animate({width:'100%'}); 
     $("#left").animate({width:'0%'}); 
    }) 
    $("#left").mouseleave(function(){ 
     $(this).animate({width:'50%'}); 
     $("#right").animate({width:'50%'}); 
    }) 
    $("#right").mouseleave(function(){ 
     $(this).animate({width:'50%'}); 
     $("#left").animate({width:'50%'}); 
    }) 

Answer 2

我也做從開發空上回答了一些變化，請參考：https://stackoverflow.com/a/8003361/5887755

演示：http://jsfiddle.net/yCY9y/1251/

$("#left, #right").each(function() { 
    $(this).data("standardWidth", $(this).width()); 
}); 

$("#left, #right").hover(function() { 
    $(this).stop(true, false).animate({ 
    width: "100%" 
    }, 300); 
    $(this).parent().children().not(this).stop(true, false).animate({ 
    width: "0%" 

    }, 300); 
}, function() { 
    $(this).parent().children().each(function() { 
    $(this).stop(true, false).animate({ 
     width: $(this).data("standardWidth") 
    }, 300); 
    }); 
}); 

更新：我沒放。 stop(true, false)爲更好的結果。