私のウェブサイトを実現するためには何か助けが必要です。私は右から左へ(ボタンとマージン - 右のアクションで)画面にスライドするJSでアニメーション化されたdivを持っています。 Firefoxではうまく動作しますが、Chromeではうまく動作しません:margin-rightで同じ値で表示されたときはFFで完全に表示されますが、GGでは表示されません。JavaScriptでChromeのmargin-right値を増やすにはどうすればよいですか?
divを非表示にすると同じ問題が発生します。値が十分に高くないので、まだ目に見える部分があります。 CSSで「-webkit-margin-end
」というChromeの値を高く設定していましたが、これは隠れ出しに役立ちましたが、問題が残っていることを示しました。スクリプトでChromeオプションを追加する必要があると思うので、「margin-right」の値(または「-webkit-margin-end
」の値)もアニメーション化すると増加する可能性がありますが、私のリクエストに対する答えは実際には見つかりません。
おそらく、私は自分のコードにそれを適用するには十分ではないからです。だから、ちょっとした助けが本当に感謝しています。
さらに、ページの読み込みをスライドさせる方法はありますか?ユーザーがウェブサイトに入ったときにdivを「開く」ようにしたいと思います。
ここに私のコードの一部です:
/* CSS */
/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}
/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}
/* SCRIPT */
jQuery.easing.def = 'easeOutBounce';
$('#plus').click(function() {
if($(this).css("margin-right") == "125px") {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}
});
のFirefox:
クローム:
また、ページの読み込み時にスライドする方法はありますか?ユーザーがウェブサイトに入ったときにdivを「開く」ようにしたいと思います。どうもありがとうございます ! –