Не работает toggle
 

День добрый, я вот пишу скрипт чтоб по клику на блок изображение сворачивалось и текст блока менялся, а при повторном клике блок разворачивался и текст блока обратно менялся.
Вот сам код:
$('#div_tog').toggle(function(){
$('#div_img').fadeOut(1000);
$(this).text('Развернуть');
}, function(){
$('#div_img').fadeIn(1000);
$(this).text('Свернуть');
});
Вставляю вместо toggle hover, сам код работает, а когда toggle сам блок мгновенно сворачивается и всё, в чём здесь может быть проблема и как осуществить этот скрипт с помощью toggle?

Потому что в последней версии jQuery больше нет этого метода (по крайней мере в этом применении)

Это катастрофа! А как же тогда мне осуществить данную задачу, есть идеи?

Самое простое решение - флаг.

var flag = new Boolean(true);//Создаем логическую переменную (со значением true)

$('selector').click(function() {
  if (flag) {//Если flag == true
    flag = false;//Меняем значение переменной flag
    func1.call(this);//Вызываем func1 с контекстом этой функции (т.е. в вызванной функции this = this этой функции)
  } else {//Если flag не равно true
    flag = true;
    func2.call(this);
  }
  return false;
});

function func1() {...};
function func2() {...};

Но в общем никто не мешает вам пользоваться не последней версией jQuery.

jQuery написан на javascript и никакой магии в нем нет. Любой его метод можно написать самостоятельно.

Хорошо бы ещё понять как это сделать!
Потому что у меня чё-то всё равно не получается данную задачу решить.

Вы решение с флагом пробовали? Что говорит консоль? Сделайте тестовый пример.

Первый раз пробовал, ошибка была в if (flag) иф проперти ай ди,
Потом ошибки не было, но скрипт не работал, сейчас вот так делаю:
var flag = new Boolean(true);

$('#formHide').click(function(){
if (flag) {
flag = false;
func1.call(this);
}else {
flag = true;
func2.call(this);
}
return false;
});

function func1(){
$('#forheader').fadeOut(3000)};
function func2(){
$('#forheader').fadeIn(3000)};
Всё заработало!
Спасибо бааальшое. flag это реально круто.

Но я всё равно не очень понимаю как это работает, буду разбираться сейчас на другом примере. Если есть ссылки на материалы по этой теме, поделитесь плиз.

Я добавил комментарии к своему коду (выше).

В данном коде я использовал:
call,
boolean,
if

Всё, вроде разобрался, после того как свершилось событие click true изменилось на false и произошло действие fadeOut, а после этого если кликнем ещё раз false изменится на true и произойдёт действие fadeIn.
Но назначение return false мне не очень понятно, а его закомментировал, скрипт прекрасно выполняется.

Всё, вроде разобрался, после того как свершилось событие click true изменилось на false и произошло действие fadeOut, а после этого если кликнем ещё раз false изменится на true и произойдёт действие fadeIn.
Но назначение return false мне не очень понятно, я его закомментировал, скрипт прекрасно выполняется.

Это для универсальности) Часто вешают событие на ссылку, с href='#', а потом удивляются что ничего не работает. return false отменяет действие по умолчанию события click.

Да точно, я такое видел событие click вешали на ссылку для того чтоб валидно было открывать страницу в новом окне, я не совсем сначала это понимал, но походу разницу в написании target="blank" и target="_blank" пытались компенсировать js.
Других причин для этого я не вижу, для изменения стиля ссылки легче использовать css a:hover и a active

$('#formHide').click(function() {
$('#my_form').toggle("slow");
($(this).text()=='Развернуть')?$(this).t ext('Cвернуть'):$(this).text('Развер� �уть');
});

Akella79,
У меня версия jquery-1.9.1, там метод .toggle не работает, приходится использовать конструкцию со state:

$(function(){
var state = true;
$('#gallery_1').click(function(){
	if(state){
		$('#gallery').show('slide', 1000, function(){
			$('#gallery_1').attr('value','Скрыть галерею')
		});	
	}
	else{
		$('#gallery').hide('explode', 1000, function(){
			$('#gallery_1').attr('value','Показать галерею')		
		});	
	}
	state = !state; 
})
});

Это лучший метод решения данного вопроса, взял его из http://jqueryui.com/animate/

Версия *! jQuery v1.10.2
В версии jquery-1.9.1 должно тоже работать, там синтаксис самой функции немного поменялся,
http://api.jquery.com/toggle/
fadeOut FadeIn не нужно прописывать, toggle сама это делает,
вот пример

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // функция по завершению анимации
//тут можно прописать смену атрибутов т.е Показать/скрыть 
  });
});

первый параметр скорость сворачивания/ разворачивания

Тогда уж лучше сразу так написать

$('#formHide').click(function(){
if ($('#formHide').text() == 'Свернуть форму'){
$('#my_form').slideUp(1000);
$(this).text('Развернуть форму')}

else {
$('#my_form').slideDown(1000);
$(this).text('Свернуть форму');}
});

Тут хоть время выполнения эффекта задать можно.
Да испортили разработчики toggle.

$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// функция по завершению анимации
//тут можно прописать смену атрибутов т.е Показать/скрыть
});
});
Тогда показать/скрыть применится к $('#book'), а как я понимаю надо бы к $('#clickme')

Еще можно сделать так, вставьте код ниже в jquery и toggle будет работать, как раньше

jQuery.fn.toggle = function( fn, fn2 ) {
  // Don't mess with animation or css toggles
  if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) {
    return oldToggle.apply( this, arguments );
  }
  // migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");
  // Save reference to arguments for access in closure
  var args = arguments,
  guid = fn.guid || jQuery.guid++,
  i = 0,
  toggler = function( event ) {
    // Figure out which function to execute
    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
    // Make sure that clicks stop
    event.preventDefault();
    // and execute the function
    return args[ lastToggle ].apply( this, arguments ) || false;
  };
  // link all the functions, so any of them can unbind this click handler
  toggler.guid = guid;
  while ( i < args.length ) {
    args[ i++ ].guid = guid;
  }
  return this.click( toggler );
};

Apollon,
:write: oldtoggle

А чтобы были и старые, и новые особенности toggle, то первую строку в коде выше запишите так
jQuery.fn.toggleOld = function( fn, fn2 ) {
Используя в скрипте toggle вы получите доступ к новым функциям
Используя в скрипте toggleOld вы получите доступ к старым функциям

Тоже верно :lol:

Спасибо. Так код покороче будет!

Легкое решение
 

$('#formHide').click(function() {
$('#my_form').toggle();
if($(this).text() == "Скрыть форму") {$(this).text("Показать форму");}
else {$(this).text("Скрыть форму");}

});

Привет всем у меня такое же проблема но только ссылками как добавить два get запроса на одном ссылке то есть при первой нажатии на ссылку передавалось один запрос а втором нажатии второй буду очень признателен не где не могу найти
код примерно сделал так:
$(document).ready(function() {
var flag = new Boolean(true);
$('.price11').click(function(){
if (flag) {
flag = false;
func1.call(this);
}
else {
flag = true;
func2.call(this);
};
return false;
});

function func1(){
$('.price11').attr('href', "?id=2");

};
function func2(){
$('.price11').attr('href','?id=1');
};

});
если убрать return false;
только func1 работает а func2 почему то не работает пожалуйста помогите.
если оставить return false;
тогда она не передается get запрос;

$('#formHide').click(function(){
$('#my_form').fadeToggle(1000);
});