我在这里有一个很好的jquery下滑效果:
http://georgedesign.co.uk/test/markupV2/index.html
在“服务”部分或“团队”部分中,您可以单击任何面板,然后会打开“更多信息”框。 再次单击该框,它就消失了。
问题在于:在IE(7)中,名为“关于”的第一个面板的行为与其他面板的行为不同。相反,它在父div下方向下滑动,似乎没有采用'位置:固定'css风格与其他人一样..
此面板的内容也是不可见的..
我现在已经盯着这个问题一两个星期了,我的眼睛正在融化......
我无法弄清楚为什么它在所有其他浏览器中运行良好,而其他面板工作正常,但不是第一个。
如果有人能快速查看代码并看到我(必须拥有!)错过的话,我会感激另一双眼睛......!
非常感谢,
ps,我确信JQuery可以缩短,但我仍然可以掌握它! ;)
如果有帮助的话,这是代码:
HTML:
<div class="our-services">
<strong class="slogan main-strap">Property Investment for Private Equity</strong>
<span id="services" class="scroll"> </span>
<h2>Our Services</h2>
<p>We are a UK & European Property Investment and Asset Management Business, dedicated to generating value and providing real returns to our investors in any environment.</p>
<ul class="services-list">
<li class="slide1">
<div class="holder">
<div class="frame">
<h3><a href="#">About</a></h3>
<div class="description">
<p>Our business was established in 2002 and we remain an inspired and motivated team of property professionals.</p>
</div>
<img src="images/img1.jpg" width="233" height="139" alt="about" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
<div class="Text1 round">
<img src="images/X.gif" class="x-class" width="12" height="12" alt="X">
<p>Our success is driven by our integrity which is at the heart of everything we do, our recognition of the wisdom and vision of others around us, and our will to succeed.
Collectively the Athanor Team have in excess of 80 years experience working in real estate and financial markets. This has given us a deep understanding of how to innovate and drive value in changing conditions. We have been involved in property transactions with a value of in excess of £3 billion.<br>
Athanor are specialists in :</p>
<ul>
<li>The origination of property investment opportunities
</li>
<li>Strategy & analysis
</li>
<li>Debt origination
</li>
<li>Establishment of appropriate corporate, tax and fund structures
</li>
<li>Property asset management.
</li>
<li>Property disposals.
</li>
</ul>
<img class="round" src="images/img88.jpg" width="300" height="154" alt="Mission Crane">
</div>
<li class="slide2">
<div class="holder">
<div class="frame">
<h3><a href="#">Mission</a></h3>
<div class="description">
<p>To excel in providing our clients with a focused, individual and comprehensive solution to property investing.</p>
</div>
<img src="images/img2.jpg" width="233" height="139" alt="mission" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
<li class="slide3">
<div class="holder">
<div class="frame">
<h3><a href="#">Strategy</a></h3>
<div class="description">
<p>At Athanor we focus on ‘value’ investing into primarily institutional quality property.</p>
</div>
<img src="images/img3.jpg" width="233" height="139" alt="strategy" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
</ul>
<div class="Text2 round">
<img class="round" src="images/mission-crane.jpg" width="450" height="306" alt="Mission Crane">
<img src="images/X.gif" class="x-class" style="float:right" width="12" height="12" alt="X">
<h3>Mission</h3>
<p>"To excel in providing our clients with a focused, individual and comprehensive solution to property investing. To generate value and real returns in any environment."
</p>
</div>
<div class="Text3 round">
<img src="images/X.gif" class="x-class" width="12" height="12" alt="X">
<p>At Athanor we focus on 'value' investing into primarily institutional quality property. We target assets providing long term locational stability, with secure and attractive income returns and which also have the potential for both income and capital growth. Cash forms a significant proportion of our total return expectations.<br>
New opportunities are selected via a combination of research, intelligence and experience.<br>
Our approach is opportunistic both geographically and by property sector, although always with a view to having a balance commensurate with our perception of the risks and rewards associated with those sectors and geographies.<br>
We understand that real estate assets are very responsive to active management. Consequently asset management is a core activity which ensures returns are maximised throughout the life of investments.<br>
Primary geographies – UK and Continental Europe.<br>
Property sectors – all property sectors but primarily retail, logistics/industrial, offices, leisure and residential.</p>
</div>
</div>
CSS:
li.slide1, li.slide2, li.slide3, li.mug1, li.mug2, li.mug3, li.mug4 {cursor:pointer;}
div.Text1, div.Text2, div.Text3, div.mugText1, div.mugText2, div.mugText3, div.mugText4 {display:none; margin-top:24px;}
div.Text1, .Text2, .Text3, .mugText1, .mugText2, .mugText3, .mugText4 {
background-color: white;
position:fixed;
top:215px;
width:860px;
height:323px;
padding:20px;
border: 1px solid #e6e6e6;
}
.mugText1, .mugText2, .mugText3, .mugText4 {position:fixed; top:215px; height:400px;}
.Text1 img {float:right;}
.Text1 p {margin:0; font-size:18px;}
.Text1 ul {font-size:16px; width:440px; float:left;}
.Text2 img {float:left}
.Text2 p, .Text2 h3 {margin: 0 90px 0 490px !important;}
.Text3 p {font-size:18px}
JS:
$('.slide1').click( function() { $('.Text1').slideDown(500).fadeIn(500);
$('.Text2').slideUp(250).fadeOut(0); $('.Text3').slideUp(250).fadeOut(0); } );
$('.slide2').click( function() { $('.Text1').slideUp(250).fadeOut(0);
$('.Text2').slideDown(500).fadeIn(500); $('.Text3').slideUp(250).fadeOut(0); } );
$('.slide3').click( function() { $('.Text1').slideUp(250).fadeOut(0); $('.Text2').slideUp(250).fadeOut(0);
$('.Text3').slideDown(500).fadeIn(500); } );
$('.Text1, .Text2, .Text3').click( function() { $('.Text1, .Text2, .Text3').slideUp(250).fadeOut(0); } );
$('.mug1').click( function() { $('.mugText1').slideDown(500).fadeIn(500);
$('.mugText2').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug2').click( function() { $('.mugText2').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug3').click( function() { $('.mugText3').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug4').click( function() { $('.mugText4').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0);
$('.mugText3').slideUp(250).fadeOut(0); } );
$('.mugText1, .mugText2, .mugText3, .mugText4').click( function() { $('.mugText1, .mugText2, .mugText3, .mugText4').slideUp(150).fadeOut(0); } );
}
答案 0 :(得分:1)
好吧,经过多次撕裂后我终于找到了一个很好的解决方法。
我正在使用一个用于圆角的jquery插件,名为“curvycorners”。它非常酷,任何你想拥有一个圆角的东西,只需给它一个圆形的远离你去..
唯一的缺点是.. IE无法处理它,并且有点困惑,添加了一个绘制类和相对于它找到的第一个div的位置'round'。
我所做的只是添加一个带有'round'类和'display:none'的虚拟div,然后在第一个正确的元素之前我想要圆角。嘿presto,没有更多的问题!
我希望如果他们遇到同样的怪异,这对他们有帮助! ;)
谢谢你们,