jQuery色/調光その他のリスト要素が推移し、私は90%が..?

StackOverflow https://stackoverflow.com/questions/760280

  •  09-09-2019
  •  | 
  •  

質問

って順序付けリスト、も30項目です。これらの項目推移過探しも、予約も、支払も、全部エリスト項目のフェード30%の推移項目の滞在では100きのリストは、すべてのフェードを100%として管理されます。

私の問題が生じたときから項目を項目のリスト項目のフェードを100%として戻30％となっています。してほしい滞在で30%のない限り、ユーザーから離れ、トします。

使用しhoverIntentプラグインの各リストの商品です。も使っていましたjQueryを追加するクラスの現在のリストの項目で、そしてフェードを取り除いします。利用しているのを待機能はjQuery Cookbookサイト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()

誰でもできるので助けてくれください?

多くん

役に立ちましたか？

解決

これは楽しみのように聞こえたので、私はそれを実装しました。物事のルックスからは、あなたのCSSセレクタを簡略化することができます。私はあなただけの一番上のリスト項目は、フェードインとフェードアウトしたいと思いますが、それは一例からも明らかではありません。この例では、最上位のノードを強調表示し、正しくフェージングありません。私は、これはあなたがのために行っていた効果だと思いますが、私は100％確実ではないです。私はそれはあなたをするのかはよく分からないように私は、待機（）機能を使用していませんでした。

基本的に、それはあなたがに実行している問題のように聞こえるが、あなたがまだリストに残っていないときにホバーアウトの中のアイテムを退色されていることです。あなただけが完全にリストを残してきたときに、リストや他のリスト項目をフェードインします。その部分のため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>

他のヒント

どのようにこのような何かをやっについて：
簡単にそれをテストしたが、私はそれはあなたが探している効果を得ることができると考えています。

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)
  })

})

こちらの方が簡単な解決方法:

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

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;

idが良く、このようなものについては、この問題が、何を理解するために、あなたのhtmlを参照してくださいする必要があります：

それはあなたの問題は、あなたのリストの各項目ににしてフェードアウトされていることであるように私には思える、あなたがやるべきことは次のとおりです。 アウトリスト全体からマウス1の場合）、それをフェード 2）別のアイテムへの1つの項目からユーザの移動に伴って、目立たに見え、他人にマウスオーバーアイテムをフェード。

これは、カスタムプラグインで簡単だろう - 再び、idはHTMLを確認する必要があります。そのライブで見ないで取るためにたくさん、または少なくともHTMLます。

あなたは近くにあり、これは簡単に修正する必要があります。あなたのアウト機能の上でマウスを完全にULを残している場合は、最初のを確認してください。それが持っている場合は、あなたの中にフェードを処理する。それは、それらが色あせておくと、単にあなたが左にLiと、あなたが入力している李のフェージングを変更していない場合ます。

これは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;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top