Непрозрачность Jquery при наведении div не работает

Я хочу показать один конкретный div с использованием fadeTo. Если я наведу курсор на div1, то spark1 должен быть виден и исчезнет при наведении мыши.

Но он ничего не делает при зависании, и я действительно не знаю, почему.

HTML

<div class="spark1"></div>

<div class="div1">text</div>

CSS

.div1 {
    width:300px;
    height:300px;
}

.spark1 {
    position:absolute;
    width:27px;
    height:27px;
    margin-top:70px;
    margin-left:395px;
    background:url(../img/spark.png) no-repeat;
}

JS

$('.div1').hover(function(){
    $('.spark1').fadeTo(200, 0);
});

ИЗМЕНИТЬ (обновить)

HTML

<div class="spark1"></div>
<div class="div1"></div>

CSS

.div1 {
width:300px;
height:300px;
background-color:#000000;
}

.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:0.0;
}

JS

            $('.project1').hover(function(){
                $('.spark1').fadeTo(200, 1);
            },
            function(){
                $('.spark1').fadeTo(200, 0);
            });

Все равно не заводится, не понимаю..


javascript jquery hover mouseover fadeto
person meneerfab    schedule 27.02.2012    source источник
comment
Это неполная функция наведения. Пожалуйста, обратитесь к документации jQuery для примера.   -  person Diodeus - James MacFarlane    schedule 27.02.2012
comment
Это завершено, но, вероятно, не то, что было задумано.   -  person Surreal Dreams    schedule 27.02.2012
comment
@Диодей. Существует .hover( handlerInOut(eventObject) ) перегрузка.   -  person Didier Ghys    schedule 27.02.2012
comment
@DidierGhys, но он не достигает намеченной цели появления и исчезновения   -  person footy    schedule 27.02.2012
comment
5 полных ответов в течение часа... хороший stackoverflow: P   -  person footy    schedule 27.02.2012
comment
Хорошо, спасибо всем. Теперь я знаю, что такое правильный код, но зависание вообще не сработает, и с вашими кодами все еще не сработает. Значит, что-то еще должно с ним связываться. Я обновлю код до того, что у меня есть сейчас   -  person meneerfab    schedule 28.02.2012

Ответы (5)


arrow_upward
1
arrow_downward

вам следует stop the animation, если событие срабатывает до завершения предыдущего. попробуй это

$('.div1').hover(function(){
    $('.spark').stop(true,true).fadeTo(200, 1);
},function(){
    $('.spark').stop(true,true).fadeTo(200, 0);
});

пример скрипки: http://jsfiddle.net/mK4m6/11/

person dku.rajkumar    schedule 27.02.2012
comment
ты сделал наоборот. Когда мы наводим курсор, он должен быть виден: P - person footy; 27.02.2012

arrow_upward
0
arrow_downward

Ваш код работает, если вы используете правильные имена классов css

ДЕМО

Вы определяете класс CSS .spark { }, но в своем коде используете имя класса .spark1.
Выберите одно или другое.

person Didier Ghys    schedule 27.02.2012
comment
ты сделал наоборот. Когда мы наводим курсор, он должен быть виден: P - person footy; 27.02.2012
comment
Да, это было правильно в моем коде, это был просто пример, но хороший глаз - person meneerfab; 28.02.2012

arrow_upward
0
arrow_downward

Вы допустили ошибку в функции наведения. Он имеет 2 метода обратного вызова:

$(document).ready( function() {
  $(".div1").hover(
      function(event) {
          //hover in
          $(".spark1").fadeTo(200,1);
      },
      function(event) {
          $(".spark1").fadeTo(200,0);
      });
});​

Ниже приведен рабочий скрипт:

http://jsfiddle.net/U8rzJ/7/

person footy    schedule 27.02.2012
comment
Хотя я подозреваю, что в этом случае требуются оба аргумента, .hover() может иметь 1 аргумент. Это в документах: api.jquery.com/hover/#hover2 - person Surreal Dreams; 27.02.2012
comment
@SurrealDreams да, в этом случае требуются оба аргумента. Но да, я тоже с тобой согласен - person footy; 27.02.2012

arrow_upward
0
arrow_downward

Опираясь на хороший улов Дидье имен классов, есть проблема с вашим сценарием hover(). hover() может принимать одну или две функции в качестве аргументов — если вы укажете только одну, она будет выполняться как при наведении, так и при отсутствии мыши. Вам понравится, я думаю:

$('.div1').hover(function(){
    //fade in to 100%
    $('.spark').fadeTo(200, 100);
},
function(){

    $('.spark').fadeTo(200, 0);
});

Это затухает .spark при наведении мыши и исчезает при наведении мыши. Если вы хотите анимировать только мышь, я бы переключился с .hover() на .mouseout().

person Surreal Dreams    schedule 27.02.2012

arrow_upward
0
arrow_downward

HTML

<div class="spark1"></div>

<div class="div1">text</div>

CSS

.div1 {
width:300px;
height:300px;
}

.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:.0;
}

jQuery

$('.div1').hover(function(){
    $('.spark1').fadeTo(200, 1);
},
function(){
    $('.spark1').fadeTo(200, 0);
});

Тогда все получается. 1. Используйте правильные имена классов. 2. Установите начальную непрозрачность spark1 на 0. 3. При вводе мыши непрозрачность уменьшается до 1. 4. При выходе из мыши непрозрачность уменьшается до 0.

person Sven Bieder    schedule 27.02.2012