動畫寬度。爲什麼它不起作用？

Question

當我將鼠標懸停在其上時，我想擴展每個a的寬度。使用當前的jquery腳本，兩個a都展開。我嘗試過不同的組合，我可以把它放在頭上。幫幫我！謝謝:) PS：由於某種原因，我的網站擴展了兩個a的jQuery腳本，在這裏沒有擴展任何東西。

$(document).ready(function() { 
 
    $(".rightSocial").children().hover(function() { 
 
     $(this).css("width", "100px"); 
 
    }, 
 
    function() { 
 
     $(this).css("width", "50px"); 
 
    }); 
 
});

.rightSocial { 
 
    height: 100px; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 20px; 
 
} 
 
.rightSocial a { 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 0; 
 
    padding: 0; 
 
    right: 0px; 
 
} 
 
.rightTwitter { 
 
    background: red; 
 
} 
 
.rightFB { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="rightSocial"> 
 
    <p>Share</p> 
 
    <a href="#" class="rightTwitter">Twitter</a> 
 
    <a href="#" class="rightFB">FB</a> 
 
</div>

Answer 1

這裏是您使用相當多，你所使用的邏輯的一個例子。

這將這樣的伎倆

$(document).ready(function(){ 
    $('.rightSocial').children().on('mouseenter',function(){ 
     $(this).css('width','100px'); 
     }); 

    $('.rightSocial').children().on('mouseleave',function(){ 
     $(this).css('width','50px'); 
     }); 
    }); 

http://jsfiddle.net/c8ttutrz/

這將這樣的伎倆，但有一個流暢的動畫

$(document).ready(function(){ 
    $('.rightSocial').children().on('mouseenter',function(){ 
     $(this).stop().animate({ 
      width : '100px' 
      }); 
     }); 

$('.rightSocial').children().on('mouseleave',function(){ 
     $(this).stop().animate({ 
      width : '50px' 
      }); 
    }); 
}); 

http://jsfiddle.net/c8ttutrz/1/

雖然我會選擇這個。取而代之。孩子的（），添加輔助類

你可以只還添加其他類的元素。我們稱之爲「adjustWidth」。

<a href="#" class="rightTwitter adjustWidth">Twitter</a> 

然後做這樣的事情：

$(document).ready(function(){ 
    $('.adjustWidth').on('mouseenter',function(){ 
     $(this).stop().animate({ 
      width : '100px' 
      }); 
     }); 
    }); 

Answer 2

既然要擴展只錨標記，使用.rightSocial a代替children()目前適用於所有的子項目包括p標籤，它不根據你的問題預計。

$(document).ready(function() { 
 
    $(".rightSocial a").hover(function() { 
 
     $(this).css("width", "100px"); 
 
    }, 
 
    function() { 
 
     $(this).css("width", "50px"); 
 
    }); 
 
});

.rightSocial { 
 
    height: 100px; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 20px; 
 
} 
 
.rightSocial a { 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 0; 
 
    padding: 0; 
 
    right: 0px; 
 
} 
 
.rightTwitter { 
 
    background: red; 
 
} 
 
.rightFB { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="rightSocial"> 
 
    <p>Share</p> 
 
    <a href="#" class="rightTwitter">Twitter</a> 
 
    <a href="#" class="rightFB">FB</a> 
 
</div>