Question

我正在使用jQuery创建一个交互式地图，并遇到一些我无法解决的问题。

基本上，当我点击黑色方块时，我希望它立即变为红色，此时它正好相反（从第二次点击变为红色）。有没有办法扭转 fadeToggle（）; 功能？但是，我仍然希望在鼠标悬停和 mouseout 事件中保持淡出动画。
第二个问题是，单击黑色方块“单独”或点击左侧的“选项链接”后，它会变为红色，但当我将鼠标悬停在它上面时不会保持红色。（我想在点击方格后以某种方式取消绑定 mouseover 和 mouseout 事件）。当我再次点击它时，只有淡出为0。

演示：http://jsfiddle.net/antondesign/8JHCe/

jQuery脚本

$('ul.list li a').click(function(e) {
    e.preventDefault();
    var productTitle = $(this).attr("title");
        $('.p-'+ productTitle).siblings().hide();
        $('.p-'+ productTitle).stop(true, true).animate({ opacity: "show" }, "slow");
        $('.p-'+ productTitle).unbind('mouseover mouseout');     
    });

// Check if map exists
if($('#map')) {

    // Loop through each AREA in the imagemap
    $('#map area').each(function() {
        var productIcon = $(this).attr('id').replace('area-', '');   

        // Assigning an action to the click event
        $(this).click(function(e){  
            e.preventDefault();              
            $('#'+productIcon).stop(true, true).fadeToggle('slow', function(e){
            $(this).unbind('mouseover').unbind('mouseout');
            });
        });            

    // Assigning an action to the mouseover event
        $(this).bind("mouseover", function(e) {
            $('#'+productIcon).stop(true, true).fadeTo(500, 1);
            e.preventDefault();
         });

    // Assigning an action to the mouseout event
        $(this).bind("mouseout", function(e) {
            $('#'+productIcon).stop(true, true).fadeOut(500, 0);
            e.preventDefault();
        });

   });

}

Answer 1

您可以将某些类应用于单击的元素，然后在mouseover和mouseout事件中，检查是否在淡出或执行任何操作之前应用了类。我已经更新了你的jsfiddle代码，你可以在这里查看：

http://jsfiddle.net/8JHCe/8/

希望这有帮助。

jQuery：bind（）的正确方法;和unbind（）;使用鼠标悬停，鼠标移动和单击

演示：http://jsfiddle.net/antondesign/8JHCe/

1 个答案: