Переключить анимацию, нажав в div

Question

Я хочу передать значение параметру функции каждый раз, когда нажимается div, и переключать анимацию jQuery в эту функцию. Я попробовал этот код, но он не работает:

<div onclick="aboutMe(about1)"></div> 

function aboutMe(x) { 
    $(x).toggle(function() { 
     $(x).animate({ 
      width: '600px' 
     }, "slow"); 
    }, function() { 
     $(x).animate({ 
      width: '40px' 
     }, "slow"); 
    });​ 
}; 

Что я должен делать?

Answer 1

Почему не переключать его с помощью класса? Это не лучший ответ, но вы можете подумать об этом.

var aboutMe = function(x) { 
 
    $(x).toggleClass('short') 
 
}; 
 

 
$(function() { 
 
    $('#clicker').click(function() { 
 
    aboutMe('#div1'); 
 
    }); 
 
});

#div1 { 
 
    height: 100px; 
 
    width: 600px; 
 
    background: #eee; 
 
    text-align: center; 
 
    transition : width 1s linear; 
 
} 
 

 
#div1.short{ 
 

 
    width : 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1">Hey</div> 
 
<button id="clicker">Toggle</button>

Answer 2

Выбранная вами функция переключения, которую вы пытаетесь использовать, была удалена из источника. Для достижения требуемого вам потребуется проверить текущую ширину и соответственно установить новую ширину. Попробуйте это:

$(x).click(function() { 
    $(this).animate({ width: $(this).width() == 40 ? '600px' : '40px' }); 
});​ 

отметить также, что обработчик события будет приложен каждый раз при нажатии div и сгореть функцию aboutMe(). Если это не соответствует предполагаемому поведение, вы должны изменить свой код, чтобы прикрепить события с помощью JS, что-то вроде этого:

<a href="#about1">About Me</a> 

$('a').click(function() { 
    $($(this).attr('href')).animate({ width: $(this).width() == 40 ? '600px' : '40px' }); 
});​ 

Answer 3

Как вы нажмете на DIV? Она не работает, насколько я знаю, на Div элементов ...

<label onclick="aboutMe(about1)">About Me</label> 

https://jsfiddle.net/4ntzpw8z/1/

Вот скрипку для вас. Вам просто нужно использовать другой элемент. И ваша функция работает нормально.

Кроме переключение не был удален в соответствии с Документами:

http://api.jquery.com/toggle/

Answer 4

пила его на другую тему: stackoverflow

$(document).ready(function(){ 
$('#toggle-button').click(function() { 
    var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px"; 
    $('#toggle').animate({ width: toggleWidth }); 
}); 

});

test fiddle