Справка JQuery с наведением/исчезновением/анимацией изображения

I would like to create a javascript/jquery so that when I hover an

  • item, 2 or 3 classes are called as a hovering image, since there will be a "left", "middle", and "right" image. The left and right will be fixed width, but the middle must grow according to the size of the remaining width.

    Я пытался использовать эффект lavalamp, однако это выглядит странно, останавливая функцию движения, но это все, что я мог придумать/достичь. Однако затем я столкнулся с другой проблемой, с которой я хотел бы, чтобы изображение «наведения» исчезало и постепенно исчезало.

    Вы можете взглянуть на это меню, это то, чего я достиг до сих пор - http://valkesh.000space.com

    В основном код следующий:

    <style type="text/css">
ul.nav { list-style:none;  overflow:hidden;  }
ul.nav li { float:left; height:39px; background-color:#666666;  padding:0 5px;  }
ul.nav li.last { -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; 
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}
ul.nav li.bg { margin:7px 0px 0px 3px; padding-right:8px; position:absolute; z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top; }
ul.nav li .left{ background:url(bg.png) no-repeat left top; height:39px;  }
ul.nav li a {padding:8px 20px;  color:#000000; font-size:18px; font-weight:bold; display:block; text-decoration:none; z-index:100; position:relative; }

</style>

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $('#nav1 li.bg').css({opacity: 0, visibility: "visible"});   

    $('#nav1 li a').hover(function()
    {
        var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},100);  
        $('#nav1 li.bg').css({opacity: 0, visibility: "visible"}).animate({opacity: 100});   
    },
    function()
    {
        $('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},100); 
        $('#nav1 li.bg').css({opacity: 0, visibility: "visible"});   
    });    
});
</script>
<body>

<div class="menucontainer" style="margin-top:15px;">
   <ul class="nav" id="nav1">
        <li><a href="#">Home</a></li>   
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact Us</a></li> 
        <li class="bg"><div class="left"></div></li>    
   </ul>
</div>
</body>

    Я был бы признателен, если бы кто-нибудь мог помочь мне хотя бы сделать наведение с 2 или 3 изображениями.

    Спасибо


    • jquery hover fade jquery-animate
    person Community    schedule 28.11.2009    source источник
    comment
    Мне трудно понять, какой именно эффект вы ищете. Не могли бы вы дать дополнительные разъяснения?   -  person Gausie    schedule 28.11.2009
    comment
    По сути, у меня есть меню с элементами «li» гибкой ширины (я не буду знать эту ширину заранее), поэтому при наведении этих элементов «li» я хочу, чтобы изображение при наведении было разделено на 3 класса. «Левое» изображение, покрывающее первые 5 пикселей, «Правое» изображение, покрывающее последние 5 пикселей, и «Среднее» изображение, которое будет расти в соответствии с оставшейся шириной «li». Проблема, с которой я сталкиваюсь, заключается в том, что я могу получить только это для работы с одним статическим изображением, но скажем, если первое «li» имеет ширину 100 пикселей, а второе «li» имеет ширину 150 пикселей, изображение при наведении не может быть статической ширины. Надеюсь, это поможет Спасибо   -  person    schedule 28.11.2009
    comment
    Просто чтобы добавить к моему предыдущему комментарию, ширина «Домой» и ширина «Свяжитесь с нами» не совпадают, поэтому я хотел бы, чтобы изображения росли в соответствии с их шириной (чего я не знаю, так как текст для меню сгенерированный программным обеспечением во время выполнения для пользователя) Затем я хотел бы, чтобы изображение при наведении (голубоватая круглая кнопка, показанная на моем сайте, указанном в моем первом сообщении) исчезало и исчезало, а не делало эффект наведения статическим   -  person    schedule 28.11.2009
    comment
    Вы пытаетесь использовать несколько фоновых изображений?   -  person Vincent Ramdhanie    schedule 28.11.2009
    comment
    В основном да, несколько фоновых изображений (3 изображения) для одного наведения... как я уже сказал, левое изображение, среднее изображение и правое изображение... можно ли загрузить 3 класса (по 1 классу для каждого изображения) в 1 наведение мероприятие ?   -  person    schedule 28.11.2009
    comment
    К сожалению, вы не можете использовать несколько фоновых изображений. Однако вы можете использовать повторяющееся изображение, поэтому проблемы могут возникнуть только с концами. Другой вариант — не использовать фоновое изображение, а использовать div, расположенный над элементом, содержащим 3 изображения.   -  person Vincent Ramdhanie    schedule 28.11.2009

    Ответы (1)


    arrow_upward
    0
    arrow_downward

    Попробуйте этот код, так как я думаю, что сделал то, что вы хотели. Я вытащил ваши анимации затухания и затухания и поместил их в отдельный ховер (для <ul>). Я не трогал CSS или HTML.

    $(document).ready(function(){
 $('#nav1 li.bg').css({opacity: 0, visibility: "visible"});

 $('#nav1').hover(function(){
  $('#nav1 li.bg').animate({opacity: 1, visibility: "visible"},400);
 }, function(){
  $('#nav1 li.bg').animate({opacity: 0, visibility: "hidden"},400);
 })
 $('#nav1 li a').hover(function(){
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav1 li.bg').animate({left:offset.left+"px",width:thiswidth+"px"},100);
 }, function(){
  $('#nav1 li.bg').animate({left:offset.left+"px",width:"60px"},100);       
 });
})
    person Mottie    schedule 28.11.2009