Javascript 将URL加载到CSS动画滑动iframe中

我想在css动画扩展iframe中打开一个链接。

我的问题：单击链接时href/url未加载。我可以触发iframe的css动画。（也许js会覆盖href？

在某个时候，我将请求分为两个链接进行测试：一个加载扩展的iframe，另一个加载页面到现在可见的iframe，这很有效。但一旦我把两个链接放在一起，url就不会加载

我尝试了很多其他的方法，搜索了很多jQuery插件，但还没有找到合适的解决方案。 提前感谢您的帮助

下面是现场演示的提琴：

以下是滑动iframe的css：

 /*iframe styling*/
    #slideiniframe {
        height: 100%;
        position: fixed;
        border: none;
        margin: 0;
        top: 0;
        right: 0;
        background: url(img/preloader.gif) #d8d8d8 center no-repeat;
        max-width: 800px;
    }
    /*iframe animation*/
    .hide {
        overflow: hidden;
        width: 0%;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }
    .show {
        transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -webkit-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        width: 50%;
        overflow: hidden;
    }

以及身体的html和用于激活css动画的js/jquery：

世界上最酷的护照邮票
Lorem ipsum dolor sit amet，是一位杰出的领导者


您的浏览器不支持iFrame

$（'.read_more'）。单击（函数（）{
$（'slideiniframe'）.toggleClass（'show'）.toggleClass（'hide'）；
返回false；
});
$（窗口）.ready（函数（）{
$（'html'）。单击（函数（）{
$（'slideiniframe'）.addClass（'hide'）.removeClass（'show'）；
});
});

您需要将

href

值传递给iFrame的

src

属性

$('.read_more').click(function() {
    $('#slideiniframe').prop('src', $(this).prop('href'))
    $('#slideiniframe').toggleClass('show').toggleClass('hide');
    return false;
});

$('.read_more').click(function() {
    $('#slideiniframe').prop('src', $(this).prop('href'))
    $('#slideiniframe').toggleClass('show').toggleClass('hide');
    return false;
});