0

在 jQuery 中：

场景 ** - 我有四个具有悬停效果的 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/

我做了什么 ：

  • 检查项目悬停，动画到第一个状态
  • 将项目保持在第一个状态，一旦项目容器没有聚焦，将所有项目设置为正常状态
  • 如果用户单击一个项目，则将项目设置为第二状态并将其他项目重置为正常状态。

这是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 回答