Простой JQuery Fade In / Out - PullRequest
Новая
       31

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

0 голосов
/ 12 марта 2012

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

Код 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% только после того, как я наведу его в первый раз.После этого он исчезает, как и должно быть, но больше не появляется, когда я наведите кнопку.

Есть мысли?Спасибо Спасибо!

Ответы [ 3 ]

1 голос
/ 12 марта 2012

Как насчет использования fadeTo или fadeToogle ?

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

0 голосов
/ 12 марта 2012

Здесь - ваш код, но немного измененный:

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>
0 голосов
/ 12 марта 2012

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

$("selector").on({

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

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

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

Вот документация.

...