使用jquery淡出主体iframe/对象
我想在单击链接时淡出iframe内容,但我找不到方法!。使用jquery淡出主体iframe/对象,jquery,object,iframe,fadeout,Jquery,Object,Iframe,Fadeout,我想在单击链接时淡出iframe内容,但我找不到方法!。 这是我不起作用的代码: <object type="text/html" data="page.html" id="framecontent" width="100%" height="100%"></object> <script type="text/javascript"> $(document).ready(function() { $("#mylink a").click(funct
这是我不起作用的代码:
<object type="text/html" data="page.html" id="framecontent" width="100%" height="100%"></object>
<script type="text/javascript">
$(document).ready(function() {
$("#mylink a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#framecontent").find("body").fadeOut('slow', redirectPage);
});
function redirectPage() {
$("#framecontent").attr("data", linkLocation);
}
});
</script>
$(文档).ready(函数(){
$(“#mylink a”)。单击(函数(事件){
event.preventDefault();
linkLocation=this.href;
$(“#framecontent”).find(“body”).fadeOut('slow',重定向页面);
});
函数重定向页面(){
$(“框架内容”).attr(“数据”,链接位置);
}
});
fadeOut()
似乎对不起作用,但如果您使用is,它应该会起作用。好吧,我将对象更改为iFrame,并实现代码以淡出iFrame,更改页面,并在加载后淡入iFrame-这就是您要寻找的吗?
$(文档).ready(函数(){
$(“#mylink a”)。单击(函数(事件){
event.preventDefault();
linkLocation=this.href;
$(“#framecontent”).fadeOut('slow',重定向页面);
});
函数重定向页面(){
$(“#framecontent”).attr(“src”,linkLocation).load(function(){$(this.fadeIn('slow');});
}
});
我可以问一下,为什么您会尝试淡出主体,而不是整个iFrame?毕竟,所有可查看的HTML都包含在正文中,所以你不能通过淡出iFrame来实现相同的效果吗?我尝试在单击不同链接时制作一个简单的淡出和淡出效果。因此,我们的想法是点击一个链接,这应该会淡出,然后加载剪辑过的页面:$(document).ready(function(){$(“body”).fadeIn('slow');});
<iframe src="http://www.bing.com" id="framecontent" width="100%" height="500px"></iframe>
<div id="mylink">
<a href="http://www.bing.com">Bing</a><br/>
<a href="http://www.car.com">Car.com</a><br/>
<a href="http://www.microsoft.com">Microsoft</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#mylink a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#framecontent").fadeOut('slow', redirectPage);
});
function redirectPage() {
$("#framecontent").attr("src", linkLocation).load(function(){$(this).fadeIn('slow');});
}
});
</script>