JQuery непрозрачность на div hover не работает

Question

Я хочу показать один конкретный 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);
            });

Это все равно не сработает, я не понимаю ..

Answer 1

следует 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/

Answer 2

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

Answer 3

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

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

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

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

Answer 4

Вы допустили ошибку в своей функции наведения. Имеет 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/

Answer 5

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

DEMO

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