JQuery - нажмите и активировать активную кнопку - PullRequest
Новая
       27

JQuery - нажмите и активировать активную кнопку

0 голосов
/ 02 августа 2011

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

});

Ответы [ 2 ]

1 голос
/ 02 августа 2011

Попробуйте это 

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

});
0 голосов
/ 02 августа 2011

Вы можете попробовать это: 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
        })

    });

});
...