Переполнение скрытый не работает с JQuery .css события нажатия

Question

Я присваивающей overflow: hidden, но это не похоже на работу

jsFiddle

HTML

<ul class="list-container"> 
    <li>items items</li> 
    <li>items items</li> 
    <li>items items</li> 
    <li>items items</li> 
    <li>items items</li> 
    <li>items items</li> 
    <li>items items</li> 
    <li>items items</li> 
    <li>items items</li> 
</ul> 
<a href="#" class="hide_list">Hide list</a> 

JQuery

$('.hide_list').click(function() { 
     $('.list-container').animate({width: "2px"}); 
     $('.list-container').css("overflow","hidden"); 
    }); 

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

Answer 1

Попробуйте поменять местами.

$('.hide_list').click(function() { 
    $('.list-container').css("overflow","hidden"); 
    $('.list-container').animate({width: "2px"}); 
}); 

Answer 2

Я думаю, что jquery удаляет переполнение скрытой, если вы установите высоту или ширину на что-то отличное от 0 при использовании анимации. Использование обратного вызова для метода одушевленного решает его:

http://jsfiddle.net/jonigiuro/9s9vW/5/

$('.hide_list').click(function() { 
    $('.list-container').animate({height: "2px"}, function() { 
     $('.list-container').css("overflow","hidden"); 
    }); 
}); 

Answer 3

Это потому, что вы должны вызвать переполнение: скрытый раз анимация заканчивается. Во время анимации jquery добавляет стили inline, и они перезаписывают ваш .css («переполнение», «скрытый»). Вот как это должно быть написано http://jsfiddle.net/krasimir/9s9vW/6/

$('.hide_list').click(function() { 
    $('.list-container').animate({width: "2px"}, function() { 
     $('.list-container').css("overflow", "hidden"); 
    }); 
}); 

Answer 4

Попробуйте записать это так:

 $("#div").stop(true,false).animate({ 
      width: '2px' 
     },500); 

Не беспокойтесь о .stop (истина, ложь) - все, что делает это обеспечение мероприятия не работает.

Answer 5

Есть ли причина, по которой вы устанавливаете переполнение с помощью jquery, это может быть сделано с помощью css, а затем переполнение не удаляется. Кроме того, при использовании кода в нем элементы li получают дополнительную строку. Это можно остановить, предоставив li-элементам ширину.

Answer 6

Если вы пытаетесь скрыть «список-контейнер» с эффектом вы, вероятно, следует использовать это:

$('.hide_list').click(function() { 
    $('.list-container').animate({height: "2px"}); 
    $('.list-container').hide(2000); 
}); 

или без эффекта

$('.hide_list').click(function() { 
    $('.list-container').animate({width: "2px"}); 
    $('.list-container').css("display","none"); 
}); 

Answer 7

У вас есть ошибка в вашем JavaScript. попробуйте этот код:

$('.hide_list').click(function() { 
    $('.list-container').animate({width: "2px"}); 
$('.list-container').css({"overflow":"hidden"}); 
}); 

Answer 8

своп ниже код из

$('.list-container').animate({width: "10px"}); 

$('.list-container').css("overflow","hidden"); 

в

$('.list-container').css("overflow","hidden"); 
    $('.list-container').animate({width: "10px"});