将鼠标悬停在按钮上后,我有一小段jQuery将htm文件加载到div中。这是它的样子:
$(document).ready(function () {
$('#webd').mouseenter(function () {
$('#opis').load('portfolio/webdDescription.htm');
}
);
$('#webd').mouseout(function () {
$('#opis').load('portfolio/defaultDescription.htm');
}
);
});
有没有办法让这些过渡顺利进行?就像当你将鼠标悬停在按钮上时,默认文本淡出,同时另一个文本淡入?
答案 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);
});
});
应该工作。