Можно ли оптимизировать код?
сделал вот такой код (при наведении на кнопку меняется прозрачность родительского DIV, но только при наличии второго дополнительного класса)
$('.trigger').on({
mouseenter: function(){
if ($(this).hasClass('inactive')) {$(this).parents('div.forabg').animate({ opacity: '1.0' }, 300); }
},
mouseleave: function(){
if ($(this).hasClass('inactive')) {$(this).parents('div.forabg').animate({ opacity: '0.3' }, 300); } }
});
хочется условия сделать общим. гуру, можно ли как-то оптимизировать данный код? или оставить как есть? |
$('.trigger').on('mouseenter mouseleave', '.inactive', function (e) {
$(this).parents('div.forabg').animate({
opacity: e.type == 'mouseenter' ? '1.0' : '0.3'
}, 300);
});
примерно так |
не работает, хотя и ошибок нет.
|
alecto,
$('div.forabg').on('mouseenter mouseleave', '.trigger.inactive', function(event) {
var opacity = event.type == 'mouseenter' ? '1.0' : '0.3'
$(event.delegateTarget).stop(true).animate({
opacity: opacity
}, 300)
})
|
супер! пашет!
но, очень сложная для моего понимания конструкция. вернее я ее готовую понимаю, но сам построить в таком виде не смогу. Рони, если бы вы мне еще объяснили, как благодарности вам поставить... никак сайт не позволяет :( скажите пожалуйста, можно ли к этому коду добавить что-то типа transition-delay:1s; из варианта CSS? чтобы при наезде мыши была небольшая задержка, "защита" от случайной проводки. но, чтобы при уходе мыши - все работало как сейчас, без задержки. |
Цитата:
$('div.forabg').on('mouseenter mouseleave', '.trigger.inactive', function(event) {
var opacity = event.type == 'mouseenter' ? '1.0' : '0.3'
$(event.delegateTarget).stop(true,true).delay(100).animate({ opacity: opacity }, 300)
})
|
работает, но в обе стороны.
чтобы поставить задержку только на mouseenter , надо вернуться к варианту первого сообщения с использованием .stop(true,true).delay(100) ? |
alecto,
посмотрите на вторую строку и замените 100 на 0 и 100 |
alecto,
$('div.forabg').on('mouseenter mouseleave', '.trigger.inactive', function(event) {
var time = 100, opacity = event.type == 'mouseenter' ? '1.0' : (time = 0,'0.3');
$(event.delegateTarget).stop(true,true).delay(time).animate({ opacity: opacity }, 300)
})
|
мда, черт ногу сломит, но код работает!
фантастика! премного благодарен, мудрейший Рони!!! |
| Часовой пояс GMT +3, время: 01:01. |