0

我有一个很好的 jquery 向下滑动效果在这里工作:

http://georgedesign.co.uk/test/markupV2/index.html

在“服务”部分或“团队”部分中,您可以单击任何面板并打开“更多信息”框。再次单击该框,它就消失了。

问题是这样的:在 IE(7) 中,名为“关于”的第一个面板的行为与其他面板不同。相反,它滑到父 div 下方并且似乎没有采用“位置:像其他人一样固定'css风格..

这个面板的内容也是不可见的。。

我已经盯着这个问题一两个星期了,我的眼睛正在融化..

我只是不明白为什么它在所有其他浏览器上都能正常工作,而其他面板工作正常,但不是第一个。

如果有人可以快速查看代码并查看我(必须拥有!)错过的内容,我将不胜感激另一双眼睛..!

非常感谢,

G

ps,我确信 JQuery 可以缩短,但我仍在掌握它!;)

如果有帮助,这是代码:

HTML:

<div class="our-services">
                    <strong class="slogan main-strap">Property Investment for Private Equity</strong>

                    <span id="services" class="scroll">&nbsp;</span>

                    <h2>Our Services</h2>

                    <p>We are a UK &amp; 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 &amp; 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); } );

}
4

1 回答 1

1

好吧,经过多次撕裂头发后,我终于找到了一个很好的解决方法。

我正在使用一个用于圆角的 jquery 插件,名为“curvycorners”。它很酷,任何你想要一个圆角的东西,只要给它一个圆角就可以了。

唯一的缺点是.. IE 无法处理它,并且有点困惑,添加了一个 draw 类和一个相对于它找到的第一个 div 的位置以及“round”类。

我所做的只是在我想要圆角的第一个正确元素之前添加一个带有“round”和“display:none”类的虚拟 div。嘿presto,没有更多的问题!

如果他们遇到同样的怪事,我希望这会有所帮助!;)

多谢你们,

G

于 2012-04-17T09:04:17.707 回答