Question

我正在尝试创建一个淡入/淡出过渡的菜单当单击或悬停图像进行切换时。我无法使用css3过渡效果，因为对于IE旧版本（7,8）。

我是Jquery的新手，所以有人可以帮我吗？

这是代码..

<div class="tab1">
    <ul>
        <li class="m1"><a href="#">menu1</a></li>
        <li class="m2"><a href="#">menu2</a></li>  
        <li class="m3"><a href="#">menu2</a></li>  
    </ul>
</div> 


.tab1 {position:relative; overflow:hidden; }
.tab1 li { display:inline-block; margin-right:10px;} 
.tab1 li.m1 a { display:block; background:red; width:100px; height:100px;  text-align:center; color:#fff; }
.tab1 li.m1:hover a, .tab1 li.m1.on a { background:pink;}
.tab1 li.m2 a { display:block; background:blue; width:100px; height:100px;  text-align:center; color:#fff; }
.tab1 li.m2:hover a, .tab1 li.m2.on a { background:skyblue;}
.tab1 li.m3 a { display:block; background:green; width:100px; height:100px;  text-align:center; color:#fff; }
.tab1 li.m3:hover a, .tab1 li.m3.on a { background:lightgreen;}

$('.tab1 li a').on('click', function(e){
        $(this).parent('li').addClass('on').siblings('.on').removeClass('on');
        e.preventDefault();
    });

这是演示

http://fiddle.jshell.net/9L7Dh/

Answer 1

有jQuery UI ToggleClass，addClass和removeClass函数，它们接受衰落所需的时间（以毫秒为单位）作为第二个参数。出于某种原因，我无法使样式更改在li-elements中工作，所以我将该类应用于锚点。

的CSS：

.tab1 {position:relative; overflow:hidden; }
.tab1 li { display:inline-block; margin-right:10px;} 
.tab1 li.m1 a { display:block; background:red; width:100px; height:100px;  text-align:center; color:#fff; }
.tab1 li.m1 a.on { background:pink;}
.tab1 li.m2 a { display:block; background:blue; width:100px; height:100px;  text-align:center; color:#fff; }
.tab1 li.m2 a.on { background:skyblue;}
.tab1 li.m3 a { display:block; background:green; width:100px; height:100px;  text-align:center; color:#fff; }
.tab1 li.m3 a.on { background:lightgreen;}

所有状态更改都由jQuery中的事件控制：

$('.tab1 li a').on('click', function(e){           
    if (!$(this).hasClass("selected")) {
        // Unselect others
        $('.tab1 li a').removeClass("selected");
        // Store the selected item, with a class
        $(this).addClass("selected");
        $('.tab1 li a').mouseleave(); // Update fade out the others
        $(this).addClass("on", 300); // 300 milliseconds  
    }
    else {
        $(this).removeClass("selected");
    }

    e.preventDefault();
});  

$('.tab1 li a').on('mouseover', function(e){
        $(this).addClass("on", 300);  // 300 milliseconds  
}); 

$('.tab1 li a').on('mouseleave', function(e){
        if (!$(this).hasClass("selected"))
            $(this).removeClass("on", 300);  // 300 milliseconds  
});

小提琴：

http://fiddle.jshell.net/9L7Dh/3/

<强>更新 http://fiddle.jshell.net/9L7Dh/4/

仅在您使用jQuery UI

时才适用

使用悬停/点击和淡入淡出过渡进行切换

1 个答案: