网页特效求解

Question

网页Javascript

Answer 1

a img{margin-left:15px}
a:hover img{ margin-left:10px; }

Answer 2

#networks li {
  float: left;
  height: 60px;
  width: 225px;
}
#networks li a {
  display: block;
  height: 45px;
  padding: 10px 0 5px;
  text-decoration: none;
  width: 225px;
}
#networks li a img {
  float: left;
  margin: 0 10px 0 15px;
}
#networks li a:hover img {
  margin-left:10px;
}
#networks li a strong {
  color: #000;
  display: block;
  font: 18px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  padding-top: 2px;
}
<ul id="networks" class="node" style="display: block;">
<li>
<a rel="me" href="http://twitter.com/maxvoltar">
<img width="40" height="41" alt="Twitter" src="img/profiles/twitter.png">
<strong>Twitter</strong>
twitter.com/maxvoltar
</a>
</li>
<li>
<a rel="me" href="http://flickr.com/photos/maxvoltar">
<img width="40" height="41" alt="Flickr" src="img/profiles/flickr.png">
<strong>Flickr</strong>
flickr.com/photos/maxv…
</a>
</li>
<li>
<a rel="me" href="http://emberapp.com/maxvoltar">
<img width="40" height="41" alt="Ember" src="img/profiles/ember.png">
<strong>Ember</strong>
emberapp.com/maxvoltar
</a>
</li>
<!-- <li>
<a href="http://quicksnapper.com/maxvoltar" rel="me">
<img src="img/profiles/quicksnapper.png" width="40" height="41" alt="QuickSnapper" />
<strong>QuickSnapper</strong>
quicksnapper.com/maxv&hellip;
</a>
</li> -->
<li>
<a rel="me" href="http://last.fm/user/maxvoltar">
<img width="40" height="41" alt="Last.fm" src="img/profiles/lastfm.png">
<strong>Last.fm</strong>
last.fm/user/maxvoltar
</a>
</li>
<li>
<a rel="me" href="http://vimeo.com/maxvoltar">
<img width="40" height="41" alt="Vimeo" src="img/profiles/vimeo.png">
<strong>Vimeo</strong>
vimeo.com/maxvoltar
</a>
</li>
<li>
<a rel="me" href="http://www.dopplr.com/traveller/maxvoltar">
<img width="40" height="41" alt="Dopplr" src="img/profiles/dopplr.png">
<strong>Dopplr</strong>
dopplr.com/traveller/ma…
</a>
</li>
<li>
<a rel="me" href="http://delicious.com/maxvoltar">
<img width="40" height="41" alt="Delicious" src="img/profiles/delicious.png">
<strong>Delicious</strong>
delicious.com/maxvoltar
</a>
</li>
<li>
<a rel="me" href="http://readernaut.com/maxvoltar">
<img width="40" height="41" alt="Readernaut" src="img/profiles/readernaut.png">
<strong>Readernaut</strong>
readernaut.com/maxvoltar
</a>
</li>
<!-- <li>
<a href="http://quollect.com/timvandamme" rel="me">
<img src="img/profiles/quollect.png" width="40" height="41" alt="Quollect" />
<strong>Quollect</strong>
quollect.com/timvandam&hellip;
</a>
</li>
<li>
<a href="http://www.facebook.com/profile.php?id=717361896" rel="me">
<img src="img/profiles/facebook.png" width="40" height="41" alt="Facebook" />
<strong>Facebook</strong>
facebook.com/profile.ph&hellip;
</a>
</li> -->
</ul>

Answer 3

$("#box").hover(
  function(){
    $(this).animate({paddingLeft:"0px"});
  },
   function(){
    $("#box").animate({paddingLeft:"10px"});
  })