0

jQuery の場合:

シナリオ ** - ホバー効果を持つ 4 つの Div があります。- すべて jquery アニメーションを使用して backgroundPosition を移動し、ホバー状態を表示します。

問題 ** - フォーカスまたはクリック状態を設定したいので、ボタンをクリックすると、背景位置がさらにアニメーション化されて新しい状態が表示されます。また、他のボタンがクリックされた場合にボタンが認識され、現在のクリック状態が削除され、新しく選択されたボタンで新しいクリック状態のアニメーションが開始されるようにしたいと思います...??

私の努力 ** - 少しコーディングを行いましたが、このフォーカス状態を解決できないようです。よろしくお願いします!! ;)

HTML **

<div class="rollOversHolderOne">

    <div id="mainServices_01" class="rollOver_1 rollover"></div>

        <div id="mainServices_02" class="rollOver_2 rollover"></div>

        <div id="mainServices_03" class="rollOver_3 rollover"></div>

        <div id="mainServices_04" class="rollOver_4 rollover"></div>

</div>

CSS **

#mainServices_01 {
    width:103px;
    height:131px;
    float:left;
    background:url(../images/slideHover.png) repeat 0 0;
    background-position: inline;
}
#mainServices_02 {
    width:103px;
    height:131px;
    float:left;
    background:url(../images/slideHover.png) repeat 0 0;
    background-position: inline;
}
#mainServices_03 {
    width:103px;
    height:131px;
    float:left;
    background:url(../images/slideHover.png) repeat 0 0;
    background-position: inline;
}
#mainServices_04 {
    width:103px;
    height:131px;
    float:left;
    background:url(../images/slideHover.png) repeat 0 0;
    background-position: inline;
}

jQuery **

jQuery(document).ready(function(){

    var flag; 
    var active;

    jQuery('.rollover').css( {backgroundPosition: "0 0"} ).click(function(){

        flag = false;

        jQuery(this).stop().animate(
            {backgroundPosition:"(0 -130.5px)"}, 
            {duration:1});

    });


    jQuery('.rollover').mouseout(function(){

        if(flag == false)
        {
            jQuery(this).stop().animate(
            {backgroundPosition:"(0 -130.5px)"}, 
            {duration:1})
        }else{
            jQuery(this).stop().animate(
            {backgroundPosition:"(0 0)"}, 
            {duration:1})
        }
    });


    jQuery('.rollover').mouseover(function(){

            jQuery(this).stop().animate(
            {backgroundPosition:"(0 -130.5px)"}, 
            {duration:1})
            flag = true;
    });

});
4

2 に答える 2

1

これを試して

jQuery(document).ready(function(){

    var flag; 
    var $active = null;

    jQuery('.rollover').css( {backgroundPosition: "0 0"} ).click(function(){

       if($active && ($active.index() == jQuery(this).index()))
           return;

       if($active){
           $active.stop().animate(
            {backgroundPosition:"(0 0)"}, 
            {duration:1})
       }

       $active = $(this);

        jQuery(this).addClass("clicked").stop().animate(
            {backgroundPosition:"(0 -280px)"}, 
            {duration:1});

    }).mouseout(function(){

    if(!$active || ($active && ($active.index() != jQuery(this).index()))){
        jQuery(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:1})
    }

   }).mouseover(function(){

      if(!$active || ($active && ($active.index() != jQuery(this).index()))){
        jQuery(this).stop().animate(
        {backgroundPosition:"(0 -130.5px)"}, 
        {duration:1})
      }
});

});
于 2011-08-02T03:06:10.630 に答える
0

これを試すことができます：http://jsfiddle.net/Mxkga/1/

私がやった事 ：

  • アイテムのホバーを確認し、最初の状態にアニメーション化します
  • アイテムを最初の状態に保ち、アイテム コンテナがフォーカスされていない場合は、すべてのアイテムを通常の状態に設定します
  • ユーザーが項目をクリックした場合、項目を 2 番目の状態に設定し、他の項目を通常の状態にリセットします。

これがjqueryです（実際の例については上記のリンクを参照してください）：

jQuery(document).ready(function() {


    jQuery('.rollover').css({
        backgroundPosition: "0 0"
    }).click(function() {

        //Reset and remove class activeClicked
        jQuery('.rollover').animate({
            backgroundPosition: "(0 0)"
        }, {
            duration: 500
        });
        jQuery('.rollover').removeClass('activeClicked');

        //Set new animate second state for clicked and add class
        jQuery(this).stop().animate({
            backgroundPosition: "(0 -500px)"
        }, {
            duration: 500
        });
        jQuery(this).addClass('activeClicked');
    });

    //Check when item container is not user's focus anymore, and reset all
    jQuery('.rollOversHolderOne').mouseleave(function() {

        jQuery('.rollover').stop().animate({
            backgroundPosition: "(0 0)"
        }, {
            duration: 500
        })

    });

    //If user enters an item, animate background to first state
    jQuery('.rollover').mouseenter(function() {

        jQuery(this).stop().animate({
            backgroundPosition: "(0 -130.5px)"
        }, {
            duration: 500
        })

    });

});
于 2011-08-02T07:29:54.593 に答える