Ne bu basit jQuery slideUp ve slideDown ile yanlış?

4 Cevap php

Ben fare başparmak büyüklüğünde görüntünün üzerine getirildiğinde görüntü gerçek görünümünü görüntülemek istiyorum. Fakat fare, ikinci ve sonraki görüntüleri ile vaka görünür ve sonra kaybolur, değil ilk görüntünün üzerine yerleştirilen zaman.

Bu ancak Firefox veya Chrome, İnternet Explorer mükemmel çalışıyor.

$file - runs displays all the files in a directory
$id_v - is a simple count on the number of files
$path1 - is the path

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $('#view').hide();

            $('#ig<? echo $id_v; ?>').bind('mouseover', function(ev) {
                 $('#view').slideDown();
                $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
            });

            $('#ig<? echo $id_v; ?>').bind('mouseout', function(ev){
                $('#view').slideUp();
            });
        });
    </script>

4 Cevap

Please note, my interpretation of your HTML may be completely wrong. Please post all relevant code with your questions. - help us, help you. :op

Please also note (in case you were unaware) that you can edit your question to update with relevant info.

HTML görmeden kesin olarak söyleyemem, ama şu dikkate alamaz:

$('#view').hide();

İşte 'görünümü' bir kimliği olduğunu. Kimlikleri benzersiz olmalıdır. Onları birden fazla elemanın atanan olamaz.

Ben senin javascript aşağıdaki ile HTML class='view' yapıyor olmalıdır zaman animasyon istediğiniz her öğenin, HTML id='view' oluyor sanıyorum:

$('.view').hide()
etc...

Bir deneyin ver.

Bu canlı örnek olmadan (benim için) söylemek zor ...

: Etmeye çalıştı mı

  • preload you images (with css technique or with preload jQuery plugin) ?

  • change mouseover/mouseout by mouseenter/mouseleave ?

Just for information, in jQuery 1.4, you could use multiple events. So your code could be rewritten like this :

$('#ig<? echo $id_v; ?>').bind({
  mouseover: function() {
    $('#view').slideDown(); 
    $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
  },
  mouseout: function() {
    $('#view').slideUp();
  }
});

Ben yerine mouseover ve mouseout ve vurgulu yöntemini kullanarak öneririm:

<script language="javascript" type="text/javascript">
    $(function() {
        $('#view').hide();

        $('#ig<? echo $id_v; ?>').bind('hover', 
            // over
            function() {
                $('#view').slideDown(); 
                $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
            },

            // out
            function() {
                $('#view').slideUp();
            }
        ); 
    });
</script>

Ben de onun yerine her yeni id için yeni yöntemler bağlanma, sadece bunların her biri ve kullanımı bir sınıf atamak, (hayatınızı biraz kolaylaştırmak için) öneririm

<script language="javascript" type="text/javascript">
$(function() {
    $('#view').hide();

    $('.some-class').hover( 
        // over
        function() {
            $('#view').slideDown(); 
            $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
        },

        // out
        function() {
            $('#view').slideUp();
        }
    ); 
});
</script>

Bir çok şey var olabilir.

Görüntü # görünümü sabit veya minik konumu üzerinde gösterdi ederseniz göstermek şu anda minik bir mouseout patlayacaktır.

Another thing that may cause that the #view hide instantaneously is that the element #view modifies the position of the whole document, if it is on the top or something like that. Try to remove the mouseout bind and load the page with Internet Explorer and look how the document is modified.

etiketler