使用jQuery淡入和淡出效果

时间:2014-06-11 13:22:19

标签: javascript jquery fadein

我的网页上有一张地图,上面有我们公司目前所服务的地点。有一些JavaScript效果使我们所服务的位置的名称在地图上淡入淡出,然后出现我们位置的图标。我需要它以便图标仍然淡入,但是当加载网页时,位置的名称不会淡入淡出。如果有人能提供帮助那就太棒了!

以下是地图效果的JavaScript:

$(document).ready(function() {
function get_random(items){
    return items[Math.floor(Math.random()*items.length)];
}

$('#map').append('<div id="animate" class="animatedText1"></ul>');
var x = 0;
var counter = 0;
var xpos = 0;
var ypos = 0;


$('.col_3 li').each(function(){

        xpos = Math.random() * (630 - this.offsetWidth);
        ypos = Math.random() * (404 - this.offsetHeight);
        $("#animate").append("<div class='transparent' id='efx_" + x + "' style='top:"      + ypos + "px;left:" + xpos + "px'>" + $(this).text() + "</div>");
        $("#efx_" + x).find("span").removeClass("red");
        $("#efx_" + x).delay(Math.floor(Math.random() *    1000)).fadeTo(Math.floor(Math.random() * 8000)+1000, .7,  function(){
            $(this).fadeOut(Math.floor(Math.random() * 3000)+500, function(){
                $(this).remove();
                counter++;
                if(counter == $('.col_3 li').length-1){
                    $("#animate").hide();
                }
                if(counter == $('.col_3 li').length){
                    $("#animate").addClass('with_icon').fadeIn(2000);
                    $(".icons").show()
                }
            });
        });
    x++;
});

});

以下是一些HTML:

<?php
$page = "contact";
$sub_page = "locations";
$banner = "banner-contactus";
?>
  <div class="page inter">
     <?php include "php_includes/header.php" ?>
   <div class="content clearfix">
     <div class="content_header">
        <h1>IN CITIES NEAR YOU.</h1>
     </div>
     <div class="left_col">
         <div class="one_col">
            <div id="map">
            <div class="icons">
          <div id="reg02" class="reg">
            <div class="info">
          <p class="state">Arizona</p>
          <p>Phoenix, AZ</p>
        </div>

0 个答案:

没有答案