jQuery работает только с зависанием

Question

У меня есть вопрос относительно jQuery.

Пожалуйста, смотрите код:

$(document).ready(function() { 
    $(".button").hover(function() { 
     $('.div1').animate({width: '200px'}); 
    }, function() { 
     $('.div1').animate({width: '100px'}); 
    }); 
}); 

В основном то, что он делает это: когда пользователь наводит курсор на DIV - его ширина идет до 200px. Когда пользователь перемещает свою мышь, ширина возвращается к норме.

Мне было интересно, почему это не работает с .click?

Answer 1

Вы можете сделать это так :)

$(document).ready(function() { 
 

 
    $(".button").on('click', function() { 
 
    var toggleWidth = $(".div1").width() == 100 ? 200 : 100; 
 
    $('.div1').animate({ 
 
     width: toggleWidth 
 
    }); 
 
    }); 
 
    
 
});

.div1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="div1"></div> 
 

 

 
<button class="button">Click</button>

Answer 2

пожалуйста, проверьте этот код:

<h1>Mouse Click</h1> 
    <ul class="mouseClick"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
     <li>9</li> 
    </ul> 

     function ShowLi() { 
     $(this).css("color", "red"); 
     return false; 
    } 


    $('.mouseClick li').click(ShowLi); 

Fiddle

Answer 3

достичь с классом

$(".button").on("click" , function() { 

     if(!$(this).hasClass("clikedButton")){ 
      $('.div1').animate({width: '200px'}); 
      $(this).addClass("clikedButton"); 
     } 
     else{ 
      $('.div1').animate({width: '100px'}); 
      $(this).removeClass("clikedButton") 
     } 
}); 

Fiddle

Answer 4

.hover это не событие в JQuery, это ярлык. В принципе, это похоже на написание

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

.click используется, чтобы иметь такой ярлык с .toggle(handler1, handler2), но он устарел и удаляется.

Вам нужно использовать флаг. Я предпочитаю вставлять этот флаг в объект данных. Просто сделать что-то вроде этого:

$(document).ready(function() { 
    $(".button").click(function() { 
     var $this = $(this); 
     $this.data("click_toggle", !$this.data("click_toggle")); 
     $('.div1').animate({width: $this.data("click_toggle") ? '200px' : '100px'}); 
    } 
}); 

Fiddle

---

Флаг также может быть класс, который вы переключаетесь с toggleClass и проверить, если элемент имеет класс с .hasClass.

$(".button").click(function() { 
    var $this = $(this); 
    $this.toggleClass('active'); 
    $('.div1').animate({width: $this.hasClass("active") ? '200px' : '100px'}); 
}); 

Fiddle

---

Наконец, вы можете использовать CSS анимацию. Вам просто нужно переключить класс и использовать CSS для анимации ширины.В зависимости от вашей разметки, хотя, возможно, придется использовать различные методы DOM обхода, но вот пример:

HTML

<div class="div1"></div> 


<button class="button">Click</button> 

JS

$(".button").click(function() { 
    $(this).prev().toggleClass('active'); 
    //If you have a single div1, you can use $('.div1').toggleClass('active'); 
}); 

CSS

.div1{ 

    width:100px; 
    background:green; 
    border:1px solid red; 
    height:100px; 
    -webkit-transition : all 0.5s; 
    -moz-transition : all 0.5s; 
    -o-transition : all 0.5s; 
    transition : all 0.5s; 
} 

.div1.active{ 
    width : 200px; 
} 

Fiddle