的jQuery：閃爍的按鈕上的文字，使按鈕跳到

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=bla-bla-bla&sensor=false&libraries=geometry"> 
    </script> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="sdr.js"></script> 
</head> 
    <body> 
    <div style="display: table; height: 100%; width: 100%;"> 
     <div id="data" style="display: table-row; height: 20px;"> 
      <div style="display: table-cell;"> 
       <input id="btnPoint" type="button" value="Mark the point" onclick="markPoint()" /> 
       Point: <input id="txtPoint" type="text" /><br /> 
       <input id="btnPolygon" type="button" value="Mark the polygon" /> 
       Polygon: <input id="txtPolygon" type="text" /> 
      </div> 
     </div> 
     <div style="display: table-row; "> 
      <div id="map_canvas" style="display: table-cell;"></div> 
     </div> 
    </div> 
    </body> 
</html>

sdr.js：

var map; 
var pointMarker; 

$(document).ready(initialize); 

function initialize() { 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
    var myOptions = { 
     zoom : 7, 
     center : chicago, 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map($('#map_canvas')[0], myOptions); 
    pointMarker = new google.maps.Marker({ 
    position: map.getCenter() 
    }); 

    $('#btnPoint').css('width', $('#btnPoint').outerWidth()); 
    $('#btnPoint').css('height', $('#btnPoint').outerHeight()); 
    $('#btnPoint').each(function() { 
     var elem = $(this); 
     var title = elem.val(); 
     setInterval(function() { 
      if (!elem.val()) { 
       elem.val(title); 
      } else if (elem.data('listener')) { 
       elem.val(''); 
      } 
     }, 500); 
    }); 
} 

function placePointMarker(location) { 
    pointMarker.setPosition(location); 
    pointMarker.setTitle(location.lat() + "," + location.lng()); 
    pointMarker.setMap(map); 
    var text = Math.round(location.lat() * 1000)/1000 + ',' + Math.round(location.lng() * 1000)/1000 
    $('#txtPoint').val(text); 
} 

function markPoint() { 
    var listener = $('#btnPoint').data('listener'); 
    if (listener) { 
     google.maps.event.removeListener(listener); 
     $('#btnPoint').removeData('listener'); 
    } else { 
     $('#btnPoint').data('listener', google.maps.event.addListener(map, 'click', function(event) { 
      placePointMarker(event.latLng); 
     })); 
    } 
}

所有我想要做的是使「馬克點「按鈕在點擊時閃爍，並在再次點擊時停止閃爍。問題是，當我刪除按鈕文本並將其恢復時，它似乎改變了位置。它看起來像按鈕跳躍。我不知道爲什麼。任何人？

來源

2012-03-29 mark

要回答你的問題，嘗試按鈕的值設置爲一個空格字符，而不是一個空字符串：

$('#btnPoint').each(function() { 
    var elem = $(this); 
    var title = elem.val(); 
    setInterval(function() { 
     if (!elem.val()) { 
      elem.val(title); 
     } else if (elem.data('listener')) { 
      elem.val(' '); 
     } 
    }, 500); 
});

你也可能需要設置的按鈕明確的保證金，以使他們排隊。

input[type=button] { margin: 2px; }

來源

2012-03-29 22:41:05 Pete

設置爲空間完成了這項工作。謝謝。 – mark 2012-04-01 07:31:12

爲保證金提示+1 - 再次感謝。 – mark 2012-04-01 07:33:49

的jQuery：閃爍的按鈕上的文字，使按鈕跳到

回答

相關問題