-1

我有一个事件列表,发生了一个悬停动画序列。最后出现了社交图标。当我将鼠标悬停在社交图标上时,鼠标离开事件在另一个兄弟姐妹上触发,社交按钮消失。

这是源代码:

<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&amp;w=150&amp;h=220&amp;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>

当我将鼠标悬停在社交图标上时,我想停止动画。

这是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); 
    }

}
4

1 回答 1

0

试试这些:

$('.upcoming-event').mouseover(function(){

$('.upcoming-event').mouseout(function(event){

编辑:实际上,我明白你的问题是什么——你的“add-this”div 和你的社交图标在“upcoming-event”div 之外,导致 mouseleave 触发。将“add-this” div 移动到“upcoming-event” div 中,您应该可以开始了。

<li>

        <div class="upcoming-event" style="background-color: rgb(255, 255, 255);">\
          <a href="/events/Festival/testing+2-2">
            <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.evented.gr/image.php?source=events%2Fce06e21958cd6e9d8c5da37a7f7bf9e9%2Fimages%2Fdefault%2F34-rvca-flyer.jpg&amp;w=150&amp;h=220&amp;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>
          </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.evented.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.evented.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>
        </div>
</li>
于 2012-12-13T21:29:47.593 回答