Как правильно определить делегирование событий?
Привет! Есть два вопроса:victory: . По поводу первого: у меня есть n-ое число инлайн-блоков. При hover на каждом блоке у меня происходит выполнение набора анимаций. Но анимация срабатывает сразу на ВСЕХ блоках.
$('.capabilitySection-block').hover(
function(){
$('.capabilitySection-label').animate({paddingTop:'0px'},'slow');
$('.capabilitySection-block').css('background','none');
$('.capabilitySection-comment').animate({opacity:'1'},'slow');
},
function(){
$('.capabilitySection-label').animate({paddingTop:'120px'},'slow');
$('.capabilitySection-block').css('background','url(....)');
$('.capabilitySection-comment').animate({opacity:'0'},'slow');
});
Первый вопрос: как определить выполнение анимаций только для элемента (ОДНОГО), на которого наведена мышь ?? У меня есть мысли :write: (я не лентяй). Я правильно понимаю, что надо .hover() сделать для РОДИТЕЛЯ моих блоков? То есть я пишу:
$('.capabilitySection').hover=function(event){
var target=event.target;
if (target.className!='.capabilitySection-block') return;
// а вот тут как быть? Добавить элементы из верхнего скрипта?
}
:victory: Второй вопрос: при всех этих наведениях у меня почему-о не функционирует .css('background','url(....)'); Изображение изначально задано бекграундом, а по наведению (задумка) удаляется. Но этого не происходит:blink: . При этом URL у меня правильный. |
Coriolan161,
html напишите или как обычно ... $('.capabilitySection-label', this).stop(true, true).animate({paddingTop:'0px'},'slow'); и лучше переписать hover на mouseenter и mouseleave ну и вместо 'background' терзайте backgroundImage |
рони,
<div class="capabilitySection">
<div class="capabilitySection-block">
<p class="capabilitySection-comment">Появляющийся коммент</p>
<p class="capabilitySection-label">Подпись</p>
</div>
<!--..... и таких блоков (capabilitySection-block)ещё пятеро-->
</div>
|
рони, я сделал))) за идею с разделением hover спасибо
|
hover jquery проблемы
Coriolan161,
css сразу добавить, не судьба было ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.capabilitySection-block{
height: 80px;
float: left;
width: 300px;
background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.capabilitySection-label{
padding-top: 120px;
}
.capabilitySection-comment{
opacity:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$('.capabilitySection-block').on({
mouseenter: function() {
$('.capabilitySection-label', this).stop(true, true).animate({
paddingTop: '0px'
}, 'slow');
$(this).css('backgroundImage', 'none');
$('.capabilitySection-comment', this).stop(true, true).animate({
opacity: '1'
}, 'slow');
},
mouseleave: function() {
$('.capabilitySection-label', this).stop(true, true).animate({
paddingTop: '120px'
}, 'slow');
$(this).css('backgroundImage', 'url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif)');
$('.capabilitySection-comment', this).stop(true, true).animate({
opacity: '0'
}, 'slow');
}
});
});
</script>
</head>
<body>
<div class="capabilitySection">
<div class="capabilitySection-block">
<p class="capabilitySection-comment">Появляющийся коммент</p>
<p class="capabilitySection-label">Подпись</p>
</div>
<div class="capabilitySection-block">
<p class="capabilitySection-comment">Появляющийся коммент</p>
<p class="capabilitySection-label">Подпись</p>
</div>
<!--..... и таких блоков (capabilitySection-block)ещё пятеро-->
</div>
</body>
</html>
|
Coriolan161,
ок справились сами :victory: |
| Часовой пояс GMT +3, время: 10:08. |