jQuery: показывать только один, а не ВСЕ при наведении - PullRequest
Новая
       46

jQuery: показывать только один, а не ВСЕ при наведении

1 голос
/ 23 июля 2011

Мне было интересно, как сделать так, чтобы мой сценарий применял эффект только к текущему элементу списка, на который наведен курсор, вместо каждого элемента списка в неупорядоченном списке.

Сценарий: 

<script> 
$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $("ul#navigation li div.chLeft,ul#navigation li div.chRight").show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide(function(){$(this).fadeOut(100);});
    });         
});
</script>

Наценка: 

<ul id="navigation">
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
</ul>

CSS: 

#navigation{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
}
#navigation li{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    line-height: 45px;
}
#navigation li a{
    position: relative;
    padding: 0 21px;
    height: 45px;
    color: #780507;
    display: block;
    outline: none;
    text-decoration: none;
    line-height: 90px;  
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-shadow: 0px 0px 1px #430304;
    letter-spacing: 1px;
}
.chLeft{
    width: 30px;
    height: 75px;
    background: url('../img/sprite.png') -10px -5px no-repeat;
    float: left;
}
.chRight{
    width: 30px;
    height: 75px;
    background: url('../img/sprite.png') -100px -5px no-repeat;
    float: left;
}
.floatLeft{
    float: left;
}

Ответы [ 5 ]

2 голосов
/ 23 июля 2011

Вы бы использовали оператор this внутри обработчиков событий, поэтому вы ссылаетесь на это совпадение, а не на совпадение со всеми из них: 

<script> 
$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $(this).find("div.chLeft, div.chRight").show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $(this).find("div.chLeft, div.chRight").hide(function(){$(this).fadeOut(100);});
    });         
});
</script>

Тестирование этого в jsfiddle дало некоторые странные эффекты, потому что при анимации мышь больше не находилась над ссылкой, поэтому происходило событие mouseout, вызывающее много анимаций пульсации.

Я изменил разметку на эту, и она стала немного более стабильной, но трудно сказать, чего вы пытаетесь достичь, не видя графики и страницы в контексте: 

<ul id="navigation">
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
      <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></l
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
</ul>

В этом обновленном HTML-фрагменте я поместил chLeft и chRight внутри тега <a>, чтобы при его расширении мышь все еще находилась над ним. Попробуйте ссылку выше и посмотрите, как вы справляетесь с этим.

1 голос
/ 23 июля 2011

... 

$("ul#navigation li").mouseenter(function(){
    $(this).find("div.chLeft").fadeIn(500);
    $(this).find("div.chRight").fadeIn(500);
    // it would be better to add them both a single class, then find that class once and apply fadeIn effect...
});

...

1 голос
/ 23 июля 2011

Измените ваши обработчики следующим образом: 

$("ul#navigation li").mouseenter(function(){
    $(this).find("div.chLeft,div.chRight").show(function(){$(this).fadeIn(500);});
});

$(this) относится к текущему li и find в основном говорит: "найдите divs в этом li".

0 голосов
/ 23 июля 2011

http://jsfiddle.net/KETBA/

^ Вот так

извините ... хромое описание хромает

0 голосов
/ 23 июля 2011

Не поможет ли использование $ (this)?

$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $(this).show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $(this).hide(function(){$(this).fadeOut(100);});
    });         
});
...