JQuery hiệu ứng động biên giới

Question

tôi có mã html này

<nav id="mainNav"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li>   
    </ul> 
</nav> 

Nó có phong cách css này

#mainNav { display:block; padding:5px; } 
    #mainNav ul { display:block; list-style-type:none; width:500px; border-collapse:collapse; } 
    #mainNav li { display:inline-block; width:100px; height:66px; text-align:center; padding-top:10px; float:left; background-color:gray; cursor:pointer; border-bottom:0px solid red; } 
    #mainNav a { color:white; text-decoration:none; text-transform:capitalize; } 
    #mainNav a.aHover { color:red; } 

Và kèm theo đây là mã JQuery

$(document).ready(function() { 
$('#mainNav li').mouseover(function() { 
    var el = $(this); 
    $(this).animate({ 
    "border-bottom-width":"+=5px" 
    },{ queue: false, duration: 500 }, function() { 
    el.css('border-bottom-width', '5px'); 
    }); 
    $(this).children('a').addClass('aHover'); 
}); 
$('#mainNav li').mouseout(function() { 
    var el = $(this); 
    $(this).animate({ 
    "border-bottom-width":"-=5px" 
    },{ queue: false, duration: 500 }, function() { 
    el.css('border-bottom-width', '0px'); 
    }); 
    $(this).children('a').removeClass('aHover'); 
}); 
}); 

Bây giờ những gì tôi muốn nó làm là một trong hai, phai màu biên giới sang màu đỏ và làm mờ nó ra, hoặc như được viết trong mã, mở rộng biên giới đến tối đa 5px khi di chuột qua đó deflate biên giới trở lại 0px.

Câu hỏi là, bạn có thể thấy tôi cố gắng thay đổi lớp phần tử LI ở cuối hoạt ảnh để đảm bảo đường viền đi tới chiều rộng tối đa hoặc tối thiểu, nhưng điều đó không hiệu quả, tại sao?

Làm thế nào bạn sẽ phai màu trong và ngoài đường viền?

Answer 1

Hãy thử dưới đây,

DEMO

$(document).ready(function() { 
    $('#mainNav li').hover(function() { 
     var el = $(this); 
     $(this).stop(true, true).animate({ 
      "border-bottom-width": "5px" 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).children('a').addClass('aHover'); 
    }, function() { 
     var el = $(this); 
     $(this).stop(true, true).animate({ 
      "border-bottom-width": "0px" 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).children('a').removeClass('aHover'); 
    }); 
}); 

Changed,

1. mouseover sự kiện để mouseenter vì nó là thích hợp hơn trong trường hợp của bạn
2. Changed mouseenter/mouseleave-hover
3. Đã thay đổi +=5px, -=5px đến 5px và 0px.
4. Đã thêm .stop(true, true) để đảm bảo hoạt ảnh được hoàn thành và hàng đợi sẽ bị xóa.