javascript - javascript as oop possible?

Question

I have a div tag and the javascript which creates the fadein/fadeout effect on the div tag. I like to use the same javascript on different div tags so im not recreating the javascript all the time.

how do i do this or is this possible with javascript? example in php oop would be object->getdata();, how this done in javascript?

<script type="text/javascript">
        $(function () 
        {   var $element = $('#ad1');
            function fadeInOut () 
            {   $element.fadeIn(8000, function () 
                {   $element.fadeOut(1000, function () 
                    {   $element.fadeIn(1500, function () 
                        {   setTimeout(fadeInOut, 5000);
                        });
                    });
                });
            }
            fadeInOut();
        });
    </script>

Answer 1

您可以编写一个小的 jQuery 插件（另请参阅jQuery 插件样板）。

如果您希望您的代码可重用，您所要做的就是将其复制粘贴到一个jQuery.fn函数中：

      jQuery.fn.fadeEffect = function(){
        var $element = this;
        function fadeInOut () 
        {   $element.fadeIn(8000, function () 
            {   $element.fadeOut(1000, function () 
                {   $element.fadeIn(1500, function () 
                    {   setTimeout(fadeInOut, 5000);
                    });
                });
            });
        }
        fadeInOut();
     };

现在你可以多次调用这个插件：

     $('#ad1').fadeEffect();
     $('#ad2').fadeEffect();

jQuery 动画添加到一个队列中，因此您可以稍微优化您的代码：

$element
  .fadeIn(8000)
  .fadeOut(1000)
  .fadeIn(1500, function(){
     setTimeout(fadeInOut, 5000);
  })

Answer 2

你可以简单地制作一个函数。

        function fadeInOut ($element) 
            {   $element.fadeIn(8000, function () 
                {   $element.fadeOut(1000, function () 
                    {  ........
                    });
                });
            }

然后，通过以下方式调用它：

       fadeInOut($('#ad1'));
       fadeInOut($('#ad2'));