div加载之间的jQuery平滑过渡?

时间:2013-11-22 21:40:46

标签: javascript jquery html css css3

将鼠标悬停在按钮上后,我有一小段jQuery将htm文件加载到div中。这是它的样子:

        $(document).ready(function () {
        $('#webd').mouseenter(function () {
            $('#opis').load('portfolio/webdDescription.htm');
            }
            );
        $('#webd').mouseout(function () {
            $('#opis').load('portfolio/defaultDescription.htm');
            }
            );
    });

有没有办法让这些过渡顺利进行?就像当你将鼠标悬停在按钮上时,默认文本淡出,同时另一个文本淡入?

3 个答案:

答案 0 :(得分:1)

如果您想在加载内容中添加一些平滑过渡,可以添加fadeIn(),如下所示:

$('#webd').hover(function () {

  $('#opis').load('portfolio/webdDescription.htm', function(){
    $(this).css('opacity',0).stop().animate({"opacity": 1}); });

},
 function(){
 $('#opis').animate({'opacity' :0}); $('#opis').load('portfolio/defaultDescription.htm',   function() {
    $(this).stop().animate({"opacity": 1}); });
}
);

答案 1 :(得分:0)

为默认和Web描述添加一些HTML容器,默认情况下使这些容器不可见,加载html文件,然后在悬停时淡出/淡出。

<强>更新

我删除了所有旧的代码/示例,这可能会更好地工作并且更容易扩展:

$(function(){ 
    var el = $("#opis");
    el.load("portfolio/defaultDescription.htm").show();
    el.hover(function() {
        changeText(el, "portfolio/webdDescription.htm");
    }, function() {
        changeText(el, "portfolio/defaultDescription.htm");
    });
    function changeText(el, source) {
        el.fadeOut(function() {
            el.load(source, function() {
                el.stop().hide().fadeIn();
            });
        });
    }
});

答案 2 :(得分:0)

您可以使用“技巧”来隐藏已加载的内容,然后应用jQuery平滑效果来显示它。

类似的东西:

$(document).ready(function () {
    $('#webd').mouseenter(function () {
        $('#opis').load('portfolio/webdDescription.htm');
        $('#opis').hide();
        $('#opis').show("fade", 200);
    });
    $('#webd').mouseout(function () {
        $('#opis').load('portfolio/defaultDescription.htm');
        $('#opis').hide();
        $('#opis').show("fade", 200);
    });
});

应该工作。