I have a list with events, an onhover animation sequence takes place. and finally social icons show up. When I hover over the social icons the mouse leave event triggers on the other sibling and the social buttons disappear.
Here is the source code:
<li>
<a href="/events/Festival/testing+2-2">
<div class="upcoming-event" style="background-color: rgb(255, 255, 255);">
<div class="ue-content">
<div class="ue-category" style="height: 20px; background-color: rgb(255, 255, 255);"><span><h5>Festival</h5></span></div>
<img src="http://www.domain.gr/image.php?source=events%2Fce06e21958cd6e9d8c5da37a7f7bf9e9%2Fimages%2Fdefault%2F34-rvca-flyer.jpg&w=150&h=220&out=raw" alt="Event photo">
<div class="ue-corner" style="width: 0px;"></div>
<div class="slider" style="height: 50px;">
<div class="ue-title"><span><h5 style="padding:5px;">testing 2</h5></span></div>
<div class="ue-info"><span>ffs</span></div>
</div>
</div>
</div>
</a>
<div class="add-this" style="display: none;">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1 addthis_button_facebook at300b" addthis:title="testing 2" addthis:description="ffs" addthis:url="http://www.domain.gr/events/Festival/testing+2-2" title="Facebook" href="#"><span class="at16nc at300bs at15nc at15t_facebook at16t_facebook"><span class="at_a11y">Share on facebook</span></span></a>
<a class="addthis_button_preferred_2 addthis_button_twitter at300b" addthis:title="testing 2" addthis:description="ffs" addthis:url="http://www.domain.gr/events/Festival/testing+2-2" title="Tweet This" href="#"><span class="at16nc at300bs at15nc at15t_twitter at16t_twitter"><span class="at_a11y">Share on twitter</span></span></a>
<a class="addthis_counter addthis_bubble_style" style="display: block;" href="#"><a class="addthis_button_expanded" target="_blank" title="View more services" href="#">0</a><a class="atc_s addthis_button_compact"><span></span></a></a>
<div class="atclear"></div></div>
</div>
</li>
I would like to stop the animation when I hover over the social icons.
Here is the JavaScript
var upcomingEvents = 0;
var addthisOver = false;
function fetchEvents(poffset, plimit, uoffset, ulimit){
//console.log(poffset + ' - ' + plimit + ' - ' + uoffset + ' - ' + ulimit)
var request = $.ajax({
url: "/fetch_events.php",
type: "POST",
data: {
'poffset': poffset,
'plimit' : plimit,
'uoffset': uoffset,
'ulimit' : ulimit
},
dataType: "json"
})
request.done(function(msg)
{
//console.log(msg)
if(msg != null && typeof(msg['promoted'])=='object' && (msg['promoted'] instanceof Array))
{
handleEvents(msg['promoted'], msg['promoted'].length, 'promoted');
}
if(msg != null && typeof(msg['upcoming'])=='object' && (msg['upcoming'] instanceof Array))
{
upcomingEvents = parseInt(upcomingEvents + msg['upcoming'].length);
handleEvents(msg['upcoming'], msg['upcoming'].length, 'upcoming');
}
})
request.fail(function(jqXHR, textStatus) {
//alert( "Error: " + jqXHR.responseText );
//console.log(jqXHR.responseText);
//console.log(jqXHR.statusText);
//console.log(textStatus);
//console.log(jqXHR);
})
request.complete(function(){
//console.log("Ajax request complete!");
})
}
$(document).ready(function(){
$("#more-upcoming-events").click(function(){
new fetchEvents(0,4,upcomingEvents,8);
});
});
function handleEvents(data, num, type)
{
var html = '';
for(i = 0; i < num; i++)
{
html += data[i];
}
if(type == 'upcoming')
{
$('.add-this').mouseenter(function(){
addthisOver = true;
})
$('.add-this').mouseleave(function(){
addthisOver = false;
})
$("#upcoming-event").off();
$("#upcoming-events").append(html);
$('.upcoming-event').mouseenter(function(){
$(this).find('div.ue-category').stop(true,true).animate({height:'0px',queue:false},100);
$(this).stop(true,true).delay(100).animate({backgroundColor:'#a00000',queue:false},250);
$(this).find('div.slider').stop(true,true).delay(350).animate({height:'221px',queue:false},250);
$(this).find('div.ue-corner').stop(true,true).delay(600).animate({width:'58px',queue:false},100); //58
$(this.parentNode.parentNode).find('div.add-this').delay(700).fadeIn(100);
});
$('.upcoming-event').mouseleave(function(event){
/*
trg = $(this.parentNode.parentNode).find(event.target);
if(event.target != trg[0])
{
}
*/
if(addthisOver == false)
{
$(this.parentNode.parentNode).find('div.add-this').fadeOut(100);
$(this).find('div.ue-corner').delay(100).animate({width:'0px',queue:true},100);
$(this).find('div.slider').delay(200).animate({height:'50px',queue:true},250);
$(this).delay(450).animate({backgroundColor:'#ffffff',queue:true},250);
$(this).find('div.ue-category').delay(700).animate({backgroundColor:'#ffffff',height:'20px',queue:true},100);
}
});
}
else if(type == 'promoted')
{
var cells = '';
for(y = 0; y < parseInt(4 - num); y++)
{
cells += '<td valign="top"></td>';
}
var tableHTML = '<table cellpadding="0" cellspacing="0"><tr>' + html + cells + '</tr></table>';
$("#top-events-table").html(tableHTML);
}
}
Try these instead:
EDIT: Actually, I see what your problem is — your “add-this” div with your social icons are outside the “upcoming-event” div, causing mouseleave to fire. Move the “add-this” div inside the “upcoming-event” div and you should be good to go.