Jquery: прозрачные оверлеи при наведении - PullRequest
Новая
       22

Jquery: прозрачные оверлеи при наведении

0 голосов
/ 18 декабря 2009

В основном у меня есть 4 изображения с настройками div, как это: 

   <div id="selector">
    <div id="1"><div class="folio_container pk"><div class="overlay"></div></div></div>
    <div id="2"><div class="folio_container ybn"><div class="overlay"></div></div></div>
    <div id="3"><div class="folio_container u"><div class="overlay"></div></div></div>
    <div id="4"><div class="folio_container more"><div class="overlay"></div></div></div>
    <div class="clearfloat"></div>
    </div>

и css: 

  .folio_container{margin:10px 80px 10px 15px; float:left; position:relative; cursor:pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-position:top left; background-repeat:no-repeat; width:80px; height: 80px;}
.pk{ background-image:url(../images/pk_icon.png) !important;}
.ybn{ background-image:url(../images/ybn_icon.png) !important;}
.u{ background-image:url(../images/u_icon.png) !important;}
.more{ background-image:url(../images/more_icon.png); margin:10px 0px 10px 15px !important;}

.overlay{ background-image:url(../images/overlay.png); background-position:top left; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-repeat:no-repeat; width:80px; height:80px; position:absolute; top:0px; left:0px; display:none;}

Как я могу получить свой Jquery, чтобы он исчезал в оверлее при наведении каждого отдельного элемента, меня всегда смущала эта идея, поскольку классы div одинаковы, не вызовет ли они их все одновременно время

Вот пока вопрос: 

$('.overlay').css('display', 'block');
$('.overlay').css('opacity', 0.0);
$('folio_container', this).hover(function() {
    $(this).children('.overlay', this).stop().animate({opacity:1.0},500);
},
function() {
    $(this).children('.overlay', this).stop().animate({opacity:0.0},500);
});

Ответы [ 2 ]

1 голос
/ 18 декабря 2009

За кулисами jQuery выполняет итерацию каждого из div, соответствующих вашему селектору, и связывает функции over и out с каждым отдельным элементом.

Кроме того, я рекомендую вызывать stop с обоими необязательными параметрами, clearQueue (для удаления любых ожидающих анимаций при переключении между функциями) и gotoEnd (для завершения текущей анимации), установленными в правда - это обычно поведение, которое хотят люди! (См., Например, этот вопрос .)

0 голосов
/ 18 декабря 2009

Я получил ответ, я так и не понял, что Jquery был достаточно умен, чтобы применять действие только к отдельным элементам соответственно триггера с одинаковыми классами! Совершенная:

вот jquery в любом случае! 

    $('.overlay').css('display', 'block');
$('.overlay').css('opacity', 0.0);
$('.folio_container').hover(function() {
    $('.overlay', this).stop().animate({opacity:1.0},500);
},
function() {
    $('.overlay', this).stop().animate({opacity:0.0},500);
});
...