URL'yi CSS animasyonlu sürgülü iframe'e yükleyin.

Question

CSS animasyonlu genişleyen iframe içinde bir bağlantı açmak istiyorum.

Sorunum: bağlantıyı tıklattığımda href/url yüklenmiyor. Sadece iframe'in css canlandırmasını tetikleyebilirim. (belki js href'in üzerine yazabilir?)

Bazı noktalarda, istekleri sınamalar için iki bağlantıya ayırdım: biri, genişletme iframe'sini ve sayfayı çalıştıran şimdi görünür iframe'e yüklemek için bir diğerini yükledim. Ancak her iki bağı bir araya getirdiğimde, URL yüklenmeyecek.

Diğer birçok şeyi denedim ve jQuery-Plugins bir sürü aradı ama henüz uygun bir çözüm bulamadı. Yardımlarınız için şimdiden teşekkür ederiz! sürgülü Iframe için css burada https://jsfiddle.net/10jew169/2/

oluyor:

/*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; 
    } 

Ve js ile vücudun html css animasyon etkinleştirmek için/jQuery:

burada

canlı demo için keman var

<!--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> 

Answer 1

href değerini, iFrame öğesinin src özniteliğine geçirmeniz gerekir.

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