Простой JQuery Fade In/Out

Так что я пытаюсь сделать div с анимацией, чтобы отображаться только тогда, когда я нажимаю кнопку. Я хочу, чтобы div был невидим, пока страница не наведет его, и я хочу, чтобы он снова стал невидимым после того, как мышь больше не навешивает кнопку. Кроме того, я хочу сделать это с помощью JQuery, так как я слишком долго держался подальше от него.Простой JQuery Fade In/Out

JQuery Код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){   
     $('#about').hover(function(){ 
      $('#about_hover').stop(true, true).animate({ 
       width: '150px', 
       opacity: '0.8', 
      }, 300); 
     }, function(){ 
      $('#about_hover').animate({ 
       width: '0px', 
       opacity: '0', 
      }, 300); 
     }); 
    }); 
</script>

HTML код:

<div id="about_hover"> 
    <img src="images/hover.gif"> 
</div> 
<a href="about.html" id="about"><img src="images/menu/about.png"></a> 
<br>

CSS:

#about_hover { 
    text-align: right; 
    width: 150px; 
    float: left; 
    margin: 5px 0px 0px 100px; 
    overflow: hidden; 
}

Я получаю несколько проблем, однако. Прежде всего, изображение внутри div загружается с непрозрачностью на 100% и только доходит до 80% после того, как я навешиваю его в первый раз. После этого он исчезает, как и предполагалось, но он не появляется снова, когда я нажимаю кнопку.

Любые мысли? Thanks Спасибо!

источник

2012-03-12 Bruno Moutinho

Нет необходимости остановки на «выключено» парить? – Orbling

Я не вижу ничего плохого в коде. Я думаю, что анимация ширины немного странная, но она тонкая по коду. jsFiddle: http://jsfiddle.net/j08691/45nHH/ – j08691

Может ли это быть связано с другими элементами css, которые у меня есть? Он отлично работает в jsFiddle. –

Честно говоря, это, вероятно, лучше использовать JQuery-х on в этой ситуации .. Ваш код будет выглядеть примерно так:

$("selector").on({ 

mouseenter: function() { 
//fade in goes here 
}, 

mouseleave: function() { 
//fade out goes here 
} 
});

Hover это круто и все, но все может запутаться с парения переключени. on делает это быстро. Кроме того, для вашей непрозрачности я, вероятно, использовал бы вместо этого fadeTo.

Here is the on documentation.

источник

2012-03-12 18:45:40 Sethen

просто быстрое примечание, привязка устарела, предпочитает использовать $ ('selector'). На – Nimnam1

Изменен мой код, чтобы отразить это. – Sethen

Here ваш код, но немного модифицирована:

JS:

$('#about_hover').width(0);   
$('#about').hover(function(){ 
      $('#about_hover').stop(true, true).animate({ 
       width: '150px', 
       opacity: '0.8', 
      }, 300); 
     }, function(){ 
      $('#about_hover').animate({ 
       width: '0px', 
       opacity: '0', 
      }, 300); 
     });

HTML:

<a href="about.html" id="about"><img src="http://www.placekitten.com/20/20/"></a><br> 
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>

источник

2012-03-12 18:56:46

Я собираюсь попробовать привязку. Что касается кода, который вы опубликовали, Александр, похоже, не работает. Изображение не анимализуется с этими изменениями: S –

'Bind' не принесет вам никаких преимуществ. Но если вы хотите попробовать, лучше используйте '' on' '(http://api.jquery.com/on/) как более современную альтернативу.«Bind» считается устаревшим –

BTW, мой пример работал на меня в Chrome17 и IE9: http://jsfiddle.net/ayezutov/45nHH/2/ –

Как об использовании fadeTo или fadeToogle?

Вот небольшой фрагмент, сделанный с использованием fadeTo: http://jsbin.com/agojux?
вы можете посмотреть на это не источник here

источник

2012-03-12 19:44:46

Простой JQuery Fade In/Out

ответ

Смежные вопросы