0

Javascript：

var myIndex = 0;


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

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

开关（我的索引）{

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 回答