jQuery的 - 点击＆安培;激活按钮活跃 [英] jquery - click & activate active button

问题描述

在jQuery的：

的情景**
  - 我有悬停有对4个的div。
  - 所有使用jQuery动画以移动backgroundPosition显示悬停状态

。

的问题**
  - 我想设置一个焦点或点击状态，所以，一旦你点击了一个按钮，它的动画背景的位置进一步以显示新的状态。我想如果有其他的按钮都被点击也喜欢的按钮来了解并删除当前点击状态，并开始对动画新选择按钮，点击新国家... ??

的我的努力**
  - 我已经提前再次做了一些编码，但不能似乎摸出这个焦点状态，谢谢！ ;）

的HTML **

 ＆LT; D​​IV CLASS =rollOversHolderOne＆GT;    ＆LT; D​​IV ID =mainServices_01级=rollOver_1翻转＆GT;＆LT; / DIV＆GT;        ＆LT; D​​IV ID =mainServices_02级=rollOver_2翻转＆GT;＆LT; / DIV＆GT;        ＆LT; D​​IV ID =mainServices_03级=rollOver_3翻转＆GT;＆LT; / DIV＆GT;        ＆LT; D​​IV ID =mainServices_04级=rollOver_4翻转＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

的CSS **

 ＃{mainServices_01
    宽度：103px;
    高度：131px;
    浮动：左;
    背景：网址（../图像/ slideHover.png）重复0 0;
    背景位置：内联;
}
＃mainServices_02 {
    宽度：103px;
    高度：131px;
    浮动：左;
    背景：网址（../图像/ slideHover.png）重复0 0;
    背景位置：内联;
}
＃mainServices_03 {
    宽度：103px;
    高度：131px;
    浮动：左;
    背景：网址（../图像/ slideHover.png）重复0 0;
    背景位置：内联;
}
＃mainServices_04 {
    宽度：103px;
    高度：131px;
    浮动：左;
    背景：网址（../图像/ slideHover.png）重复0 0;
    背景位置：内联;
}
 

的jQuery的**

 的jQuery（文件）。就绪（函数（）{    VAR标志;
    VAR活跃;    。jQuery的（'过渡'）的CSS（{backgroundPosition：0}）。点击（函数（）{        标志= FALSE;        jQuery的（本）.stop（）。动画（
            {backgroundPosition：（0 -130.5px）}，
            {持续时间：1}）;    }）;
    jQuery的（'过渡'）。鼠标移开（函数（）{        如果（标志== FALSE）
        {
            jQuery的（本）.stop（）。动画（
            {backgroundPosition：（0 -130.5px）}，
            {持续时间：1}）
        }其他{
            jQuery的（本）.stop（）。动画（
            {backgroundPosition：（0）}，
            {持续时间：1}）
        }
    }）;
    jQuery的（'过渡'）。鼠标悬停（函数（）{            jQuery的（本）.stop（）。动画（
            {backgroundPosition：（0 -130.5px）}，
            {持续时间：1}）
            标志=真实的;
    }）;}）;
 

解决方案

试试这个

 的jQuery（文件）。就绪（函数（）{    VAR标志;
    变量$主动= NULL;    。jQuery的（'过渡'）的CSS（{backgroundPosition：0}）。点击（函数（）{       如果（$活性＆放大器;及（$ active.index（）== jQuery的（本）的.index（）））
           返回;       如果（$激活）{
           $ active.stop（）。动画（
            {backgroundPosition：（0）}，
            {持续时间：1}）
       }       $主动= $（本）;        jQuery的（本）.addClass（点击）。停止（）。动画（
            {backgroundPosition：（0 -280px）}，
            {持续时间：1}）;    }）。鼠标移开（函数（）{    如果（$主动||（$主动和放大器;！＆安培;！（$ active.index（）= jQuery的（本）的.index（））））{
        jQuery的（本）.stop（）。动画（
        {backgroundPosition：（0）}，
        {持续时间：1}）
    }   }）。鼠标指向（函数（）{      如果（$主动||（$主动和放大器;！＆安培;！（$ active.index（）= jQuery的（本）的.index（））））{
        jQuery的（本）.stop（）。动画（
        {backgroundPosition：（0 -130.5px）}，
        {持续时间：1}）
      }
}）;}）;
 

In jQuery:

Scenario ** - I have four Divs that have hover effects. - All use a jquery animation to move the backgroundPosition to show the hover state.

Problem ** - I want to set a focus or clicked state, so that once you have clicked on a button it animates the background position even further to show the new state. I would also like the buttons to be aware if any other buttons have been clicked and remove the current click state and begin to animate the new click state on the new selected button ...??

My efforts ** - I have done a bit of the coding but cant seem to work out this focus state, thanks again in advance !! ;)

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

});

解决方案

Try this

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

});

这篇关于jQuery的 - 点击＆安培;激活按钮活跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！