Как я могу сделать изображение плавным и расширить с помощью jQuery 1.7

Question

Я пробовал разные фрагменты кода, но не могу заставить их делать то, что я хочу.

Я хочу иметь возможность иметь href, который будет переключатьизображение от того, чтобы быть скрытым / затемненным / сжатым, чтобы быть расширенным / полностью видимым.

Я смотрел на затухание / задержку и также анимировал, но не могу понять синтаксис.

Как отдельный вопрос, я делаю это на вкладке.Можно ли заставить вкладку прокручиваться, если изображение или текст после него расширяются за пределы высоты, определенной для вкладки?

#StockTakeSummaryPic {
width:1120px;
height:1px;}

function fncShowImage() {
$('#StockTakeSummaryPic').animate({
    opacity: 1,
    height: 'toggle'
}, 1000, function () {
    // Animation complete.
});
}


<a href="#" onclick="javascript:fncShowImage()">View</a>

Код добавлен.

Спасибо.

Answer 1

Первое, что неправильно, это то, что вы установили высоту на 1px, поэтому, когда вы переключаете высоту, она переключается между 0 и 1, поэтому она все равно не будет отображаться.

ПроверьтеИз моего примера здесь Я дал три варианта toggle, fade и slide.Вам просто нужно изменить вызов функции, чтобы увидеть, как они работают.

Answer 2

<script>
$('.pic-toggle').click(function(event) {
    event.preventDefault();
    $('#StockTakeSummaryPic').toggle("slow");
});
</script>


<a class='pic-toggle' href="#">View</a>

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