0

Javascript:

var myIndex = 0;


setTimeout(updateFunction, 000)
setInterval(updateFunction, 17000)

function updateFunction(){
++ myIndex;
if (myIndex > 2) myIndex = 0;

スイッチ (myIndex) {

case 0: showIt();
break;
case 1: showIt2();

case 1:
case 1:

break;
case 2: showIt3();
case 2: 
case 2:
break;

}

}

    function showIt() {
        document.getElementById("news1").style.visibility = "visible";

        document.getElementById("news3").style.visibility = "hidden";
     document.getElementById("news2").style.visibility = "hidden";
     $('#readmore1').animate({ "top":"-50px", "left":"546px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
        $('#readmore2').animate({ "top":"-35px", "left":"726px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
        $('#readmore3').animate({ "top":"-35px", "left":"939px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);







    }

    function showIt2() {
        document.getElementById("news1").style.visibility = "hidden";
            document.getElementById("news2").style.visibility = "visible";
            document.getElementById("news3").style.visibility = "hidden";
            document.getElementById("pic").style.visibility = "hidden";
            $('#readmore1').animate({ "top":"-35px", "left":"546px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore2').animate({ "top":"-50px", "left":"726px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore3').animate({ "top":"-35px", "left":"939px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);    

    }

    function showIt3() {
        document.getElementById("news1").style.visibility = "hidden";
            document.getElementById("news2").style.visibility = "hidden";
            document.getElementById("news3").style.visibility = "visible";
            document.getElementById("pic").style.visibility = "hidden";
            $('#readmore1').animate({ "top":"-35px", "left":"546px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore2').animate({ "top":"-35px", "left":"726px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore3').animate({ "top":"-50px", "left":"939px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);

}

HTML:

<div id="news">News and Alerts
    <div id="readmore1"><a href="#" onclick="showIt()">WebDevelopment</a></div>
    <div id="readmore2"><a href="#" onclick="showIt2()">Mundus Note Project</a>
    </div>
    <div id="readmore3"><a href="#" onclick="showIt3()">GGP</a>
    </div>

</div>
<div id="news1">post 1</div>
<div id="news2">post 2</div>
<div id="news3">post 3</div>
<div id="pic"><a href="#">hey</a></div>

CSS:

#news1, #news2, #news3{
position: absolute;
width: 800px;
left: 00px;
top: 270px;
visibility: hidden;
padding: 30px;
font-size: 15px;
letter-spacing: 1px;
color: black; 
font-family: sans-serif;
border-top: solid;
border-bottom: solid;


}
#news{
position: relative;
left: 10px;
top: 275px;
font-family: sans-serif;
letter-spacing: 2px;
color: rgb(0,0,115);

}
#pic{
position: absolute;
width: 95px;
height: 95px;
display: block;
text-indent: -9999px;
left: 900px;
top: 180px;

}
#pic a{
background: url(../images/sphere4.png);
display: block;
width: 95px;
height: 95px;
visibility: hidden;

}
#readmore1{
position: absolute;
font-size: 17px;
top: -35px;
left: 394px;
height: 400px;  


}
#readmore1 a{
text-decoration: none;
color: white;
background: url(../images/borderback.png);
padding:10px;

}
#readmore2{
position: absolute;
font-size: 17px;
top: -35px;
left: 574px;

}
#readmore2 a{
text-decoration: none;
color: white;
background: url(../images/borderback.png);
padding:10px;

#readmore3{
position: absolute;
font-size: 17px;
top: -35px;
left: 787px;

}
#readmore3 a{
text-decoration: none;
color: white;
background: url(../images/borderback.png);
padding:10px;

}

わかりました、これから始めましょう。これを解決する方法を何時間も探しましたが、関数 showIt() が呼び出されたときに div をフェードインできないという問題が発生しました。コードの 99% は、showIt() が呼び出されたときに div "#pic" をフェードインできないことを除いて機能します。すべての関数 (showIt2 と showIt3) でこれを実行できるようにしたいのですが、最初にこれを行う方法を学ぶ必要があります。

コードの大部分は、私がやろうとしていることの見通しのためのものです。

document.getElementById("pic").style.visibility = "visible";

問題は、すぐに表示され、消えないことです。よりスムーズに見えるようにする必要があり、fadeIn() を使用しようとしましたが、機能しません。関数 showIt() の「readmore3」アニメーションの後に次のコードを追加しようとしましたが、それはかかりません。

$('#pic').fadeIn();

コードの特定の部分に問題があるのか​​、それとも使用している div が背景画像へのリンクであるためなのかはわかりません。画像を表示してクリック可能にしたいのですが、これが私が知っている唯一の方法です。ホームページにパッシブアラート/ニュースボックスを作成しようとしていますが、すべての記事にはそれに付随する画像も含まれています。画像がスムーズに表示され、クリックできるようにしたいと考えています。

これを説明するのに苦労して申し訳ありません。どんな助けでも本当に感謝しています。私の問題をご覧いただきありがとうございます。

4

1 に答える 1

1

このjsfiddleを見てください：http://jsfiddle.net/yNdFZ/

この例では、jQuery.show(speed) と jQuery.fadeIn(time) を使用しています。

$(element).show('slow');
       --- or ---
var time = 5000;
$(element).fadeIn(time);
于 2013-08-15T09:55:33.470 に答える