1
ここではちょっとしたことがあります。私はウェブ開発者にとって非常に新しいことを覚えておいてください。私は、テキストがクリックされたときにフェードインとスライドでビデオを開くようにしようとしています。私はそれがキャッシュされていない限り十分に滑らかではないjqueryのスライド関数を避けることができるようにiframeを使用しています。私は前にiframeを使用していないし、私は不必要なbehaivourに実行されています。リンクをクリックすると、「すべての動画」が開きます。 GIFを参照してください：ここiframeとトランジションを伴う不要なベhaビール
は私のコードです。わかりやすくするためにテキストを編集しました。
私が行ったことは、すべての動画には折りたたまれているクラスがあり、javascriptでは「オープン」のクラスが追加されています。しかし、私が言ったように、それはそれらのすべてを対象とするようです。どんな助けもありがたい。 P
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="wrap">
<p id="text"> Lorem ipsum dolor...
<span id="link1">link 1</span>
<span id="wrap1">
<iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
....Lorem ipsum dolor...
<span id="link2">link 2</span>
<span id="wrap2">
<iframe id="frame2" class="rect" src="iframe2.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
....Lorem ipsum dolor sit amet...
</p>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
CSS：
#wrap{
margin: 100px auto;
width: 350px;
}
p{
line-height: 2em;
}
iframe {
border:0 none;
}
.rect{
float: left;
height: 0px;
width: 350px;
display: block;
margin: 0px;
padding: 0px;
opacity: 0;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.open {
height: 200px;
width: 350px;
opacity: 1;
}
#link1{
color: red;
cursor: pointer;
}
#link2{
color: red;
cursor: pointer;
}
はJavaScript：
$(document).ready(function(){
$("#link1").click(function(){
if ($(".rect").hasClass("open")){
$(".rect").removeClass("open");
$("body").find("iframe").contents().find("#pasc").get(0).pause();
} else {
$(".rect").addClass("open");
$("body").find("iframe").contents().find("#vid1").get(0).play();
}
});
$("#link2").click(function(){
if ($(".rect").hasClass("open")){
$(".rect").removeClass("open");
$("body").find("iframe").contents().find("#vid2").get(0).pause();
} else {
$(".rect").addClass("open");
$("body").find("iframe").contents().find("#vid2").get(0).play();
}
});
});
iframe1：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="vid1" width="350" height="200" >
<source src="video1.mp4" type="video/mp4">
</video>
</body>
</html>
iframe2：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="vid2" width="350" height="200" >
<source src="video2.mp4" type="video/mp4">
</video>
</body>
</html>
。 '$（" body "）を変更してください。find（ "iframe"） 'から' $（this）.next（ "iframe"） ' – eithed