2

おそらく30個のアイテムを持つ順序付けられていないリストがあります。これらのアイテムの 1 つにカーソルを合わせると、残りのリスト アイテムは 30% にフェードし、ホバーしたアイテムは 100% のままになります。リストから離れると、それらはすべて 100% までフェードバックし、私はこれを管理しました。

アイテムからアイテムに移動すると、他のリストアイテムが 100% までフェードバックし、その後 30% までフェードバックするときに問題が発生します。ユーザーがリスト全体から離れない限り、30% のままにしておきたいです。

各リスト項目で hoverIntent プラグインを使用します。また、jQuery を使用してクラスを現在のリスト項目に追加したので、残りの部分をフェードアウトして、離れたら削除できました。jQuery クックブック サイト ( http://docs.jquery.com/Cookbook/wait )にある待機関数を使用しました。

言ってることわかりますか？

これまでの私のコードは次のとおりです。

$.fn.wait = function(time, type) {
    time = time || 300;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};

$("#sites li:not(#sites li li)").hoverIntent(function(){
    $(this).attr('class', 'current'); // Add class .current
    $("#sites li:not(#sites li.current,#sites li li)").fadeTo("slow", 0.3); // Fade other items to 30%
    },function(){
    $("#sites li:not(#sites li.current,#sites li li)").wait().fadeTo(600, 1.0); // This should set the other's opacity back to 100% on mouseout
    $(this).removeClass("current"); // Remove class .current
});

*明らかに、これは $(document).ready(function() 内にあります

誰でも私を助けてもらえますか？

どうもありがとう

4

7 に答える 7

7

面白そうだったので実装してみました。見た目から、css セレクターは単純化できます。最上位のリスト項目のみをフェードインおよびフェードアウトさせたいと思いますが、例からは明らかではありません。この例では、最上位のノードが強調表示され、フェードが正しく行われます。これはあなたが望んでいた効果だと思いますが、100% 確実ではありません。何をするかわからないので、wait() 機能は使用しませんでした。

本質的に、あなたが直面している問題は、まだリストを離れていないときにホバーアウトするとアイテムがフェードインすることです。リストから完全に離れたときにのみ、リストまたは他のリスト項目をフェードインしたい場合。その部分に hoverIntent を使用しないでください。順序付けされていないリスト全体でフェードを処理すると、うまくいくはずです。

例: http://jsbin.com/usobe

例をいじる: http://jsbin.com/usobe/edit

<ul id="sites">
  <li> site 1
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>
  <li> site 2
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>  
  <li> site 3  
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>
  <li> site 4
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>  
  <li> site 5
</ul>    

<script>
$(function() {

$("#sites").hover(
     function() {}, 
     function() {        
       $('#sites>li').fadeTo("fast", 1.0); 
     }
);

$("#sites>li").hoverIntent(
    function(){
       $(this).attr('class', 'current'); // Add class .current
       $(this).siblings().fadeTo("fast", 0.3); // Fade other items to 30%
       $(this).fadeTo("slow", 1.0); // Fade current to 100%

    },
    function(){            
      $(this).removeClass("current"); // Remove class .current
      $(this).fadeTo("fast", 1.0); // This should set the other's opacity back to 100% on mouseout   
    });
});

</script>
于 2009-04-17T13:38:45.530 に答える
3

このようなことをするのはどうですか:
簡単にテストしましたが、探している効果が得られると思います.

jQuery(function($){
  var $ul = $("ul#sites")

  $ul.hover(function(){
    $("li", $ul).stop().fadeTo("fast", 0.3)

    $("li", $ul).hover(function(){
        $(this).stop().fadeTo("fast", 1.0)
    },function(){
        $(this).stop().fadeTo("fast", 0.3)
    })
  },function(){
    $("li", $ul).stop().css("opacity", 1.0)
  })

})
于 2009-04-17T13:46:15.747 に答える
1

より簡単な解決策は次のとおりです。

$("ul#sites > li").fadeTo("fast", 0.3);
$("ul#sites > li").hover(
    function() { $(this).fadeTo("fast", 1.0); },
    function() { $(this).fadeTo("fast", 0.3); }
);
于 2011-05-29T13:08:36.890 に答える
1

CSS のみのソリューションの場合:

$('a.leaders').hover(function() {
    $(this).addClass('hovered');
    $('a.leaders').not('.hovered').addClass('nothovered');
}, function() {
    $('a.leaders').removeClass('nothovered hovered');
});

a.leaders.hovered { opacity:1; }
a.leaders.nothovered { opacity:0.6; }

次のように、要素にトランジションが適用されていることを確認してください。

-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
于 2013-10-15T17:35:43.877 に答える
0

idは、この問題をよりよく理解するためにHTMLを確認する必要がありますが、次のようなものはどうでしょうか。

あなたの問題はあなたがあなたのリストの各アイテムでフェードインとフェードアウトしていることだと私には思えます、あなたがしなければならないことは：1）全体のリストからマウスアウトした場合、2）ユーザーが1つのアイテムから移動するときに別のアイテムに、マウスオーバーアイテムをフェードして表示し、他のアイテムを非表示にします。

これはカスタムプラグインを使えば簡単です-繰り返しますが、idはhtmlを見る必要があります。ライブを見ずに、または少なくともhtmlを表示せずに取り込むことがたくさんあります。

于 2009-04-17T13:16:33.463 に答える
0

あなたは近くにいます。これは簡単に修正できるはずです。out 関数チェックで、マウスが完全に UL を離れたかどうかを最初に確認します。もしそうなら、あなたのフェードインを処理してください。そうでなければ、それらをフェードしたままにして、あなたが残したliとあなたが入っているliのフェードを単に変更してください。

于 2009-04-17T13:27:41.657 に答える
0

これは、CSS を使用すると非常に簡単に実行できます。

これを見てくださいhttp://jsfiddle.net/drjorgepolanco/ga5dy0tp/

html

<div id="main-nav">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
</div>

CSS

 #main-nav ul {
    list-style: none;
 }

 #main-nav ul:hover li {
    opacity: 0.2;
 }

 #main-nav ul:hover li:hover {
    opacity: 1;
 }

リスト要素にトランジションを追加して、見栄えを良くします...

#main-nav ul li {
    transition: opacity 0.4s ease-out;
}
于 2015-09-05T02:14:18.030 に答える