jQuery:如何滚动到一个放大的元素

时间:2014-01-11 15:01:34

标签: javascript jquery html scroll

我遇到了一个相当讨厌的问题: 在我的网站上,有一些CD封面。我可以通过jQuery.switchClass扩大封面。

现在我想跳到放大的封面。但我不明白。

以下是网站链接:http://53333805.swh.strato-hosting.eu/reinhold/alt_2/disko.php

这是代码:

<script>                    
$(function() {
  $("a.cd").click(function(event) {    
     $( ".cd-klein" ).switchClass( "cd-klein", "cd-gross", 1200, "easeInOutQuint" );
     $( ".cd-beschreibung" ).toggleClass( "cd-da", 700);
     $( ".cd-gross" ).switchClass( "cd-gross", "cd-klein", 1200, "easeInOutQuint" );
  return false;
 });
});
</script>

<script> $(function() { $("a.cd").click(function(event) { $( ".cd-klein" ).switchClass( "cd-klein", "cd-gross", 1200, "easeInOutQuint" ); $( ".cd-beschreibung" ).toggleClass( "cd-da", 700); $( ".cd-gross" ).switchClass( "cd-gross", "cd-klein", 1200, "easeInOutQuint" ); return false; }); }); </script>

HTML-Markup:

<!--CD 1-->
    <a class="cd" href="#1">
     <div class="cd-beschreibung">
        <div class="cd-name">Reinhold Friedrich</div>
          <div class="cd-besetzung">
            großes Kammerorchester<br />
     <br />
            Leitung: Claudio Abbado
          </div>
            <div class="cd-kaufen">hier zu kaufen</div>
            <div class="clear-right"></div>
        </div>
     <img id="1" class="cd-klein" src="images/disko/beispiel1.jpg">
    </a>

其他CD类似于“CD1”。

感谢您的帮助!

此致 斯蒂芬

2 个答案:

答案 0 :(得分:0)

你可以试试这个,但我不确定它是否会起作用:

$(function() {
  $("a.cd").click(function(event) {    
    var eq = $('.cd img').index(this);
    $( ".cd-klein" ).switchClass( "cd-klein", "cd-gross", 1200, "easeInOutQuint", function() {
      $('.text').get(0).scrollTop = 80 + eq * 219;
    } );
    $( ".cd-beschreibung" ).toggleClass( "cd-da", 700);
    $( ".cd-gross" ).switchClass( "cd-gross", "cd-klein", 1200, "easeInOutQuint" );
    return false;
  });
});

答案 1 :(得分:0)

尝试放置

<script>                    
$(function() {
  $("a.cd").click(function(event) {    
     $( ".cd-klein" ).switchClass( "cd-klein", "cd-gross", 1200, "easeInOutQuint" );
     $( ".cd-beschreibung" ).toggleClass( "cd-da", 700);
     $( ".cd-gross" ).switchClass( "cd-gross", "cd-klein", 1200, "easeInOutQuint" );

     $(this).animate({scrollTop: $(this).offset().top}, "slow");
   return false;
 });
});
</script>