0

Как правильно прописать анимацию для блока, которая выполнялась бы по нажатию на кнопку или ссылку (лучше просто слово которое является ссылкой). У меня есть скрипт который по селектору при наведении мыши изменяет нужные блоки.

jquery.easing.1.3.js - это библиотека

Это непосредственно сам скрипт:

// JavaScript Document
$(document).ready(function(){

//When mouse rolls over
$("#ramka").mouseover(function(){
$(this).stop().animate({width:'440px', height:'200px', top:'40px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//When mouse is removed
$("#ramka").mouseout(function(){
$(this).stop().animate({width:'240px', height:'100px', top:'20px'},{queue:false, duration:3000, easing: 'easeOutBounce'})
});

});

$("#ramka").mouseover(function() - я так понимаю тут надо указать онклик или может все это функциями сделать и потом онклик(название функции)? Только вот как правильно все это написать, я пока не понял.

Параллельно вопрос, кто знает, как бы плавный перезд БГ блока сделать при помощи JS?

2 ответа 2

1

От себя я бы дал совет оценить JS скрипты этой системы SL SYSTEM

Там масса решений на JS которыее сразу покажутся немыслимы)))

2
  • спс, сейчас погляжу)
    – SnowMan
    26 ноя 2011 в 6:12
  • От меня тоже спс.
    – Arni
    26 ноя 2011 в 7:29
0
$('#knopka').toggle(function(){
    $('#block').stop().animate({width:'440px', height:'200px', top:'40px'}, 600, 'easeOutBounce')
}, function(){
    $('#block').stop().animate({width:'240px', height:'100px', top:'20px'}, 3000, 'easeOutBounce')
});

Угадал мысли?

4
  • т.е. тут получается по нажатию на ссылку с ид кнопка блок с ид блок будет менять свои размеры (первая функция) а вторая просто его уменьшает по повторному нажатию?
    – SnowMan
    26 ноя 2011 в 6:12
  • Ваш скрипт работает. Подскажите, пожалуйста, как добавить изменение св-ва display:none; хочу сделать так чтобы при нажатии одна кнопка пропадала, другая появлялась? Соответственно первая раскрывает, вторая сворачивает блок.
    – SnowMan
    26 ноя 2011 в 6:40
  • написал свой вариант скрипта: $('#kn').click(function(){ $('#bl').stop().animate({width:'440px', height:'200px'}, 600, 'easeOutBounce'); $('#kn').hide("slow"); $('#kn1').show("slow"); }); $('#kn1').click(function(){ $('#bl').stop().animate({width:'240px', height:'100px'}, 3000, 'easeOutBounce'); $('#kn1').hide("slow"); $('#kn').show("slow"); }); может посоветуете как его оптимизировать?)
    – SnowMan
    26 ноя 2011 в 7:20
  • Да, вроде, никак. Разве что написать отдельную функцию для связывания элементов... но это уже на бред похоже. =)
    – ling
    27 ноя 2011 в 19:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.