將URL加載到CSS動畫滑動iframe中

我想在css動畫擴展iframe中打開鏈接。將URL加載到CSS動畫滑動iframe中

我的問題：當我點擊鏈接時沒有加載href/url。我可以觸發iframe的css動畫。（也許js覆蓋href？）

在某些時候，我把請求分成兩個鏈接進行測試：一個加載擴展iframe，另一個加載頁面到現在可見的iframe，它工作。但只要我把兩個鏈接放在一起，網址就不會加載。

我嘗試了很多其他的東西，並搜索了很多jQuery插件，但沒有找到合適的解決方案。在此先感謝您的幫助！

這裏的現場演示的小提琴： https://jsfiddle.net/10jew169/2/

下面是滑動的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; 
    }

與人體的與JS HTML激活的CSS動畫/ jQuery的：

<!--article preview with two links to the iframe--> 
<div class="post-content"> 
    <h2>The World's Coolest Passport Stamps</h2> 
    <div class="body-text"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p><a class="read_more" href="http://travel-and-leisure-yahoopartner.tumblr.com/post/142022520144/the-worlds-coolest-passport-stamps" target="articleiframe">Keep reading</a></p> 


<!--full article in iframe--> 
<iframe id="slideiniframe" class="hide" name="articleiframe"> 
<p>Your browser does not support iframes.</p> 
</iframe> 

<!--slide in animated when clicked on link and hide when clicked elsewhere--> 
<script> 
$('.read_more').click(function(){ 
    $('#slideiniframe').toggleClass('show').toggleClass('hide'); 
    return false; 
}); 

$(window).ready(function(){ 
    $('html').click(function(){ 
    $('#slideiniframe').addClass('hide').removeClass('show'); 
    }); 
}); 
</script>

來源

2016-04-04 CanYouDoItForHalfPrice

您需要將href值傳遞給iFrame的src屬性。

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

來源

2016-04-04 21:13:23 Roy

將URL加載到CSS動畫滑動iframe中

回答

相關問題