try.jquery-5-styling里的各种css样式操作

你好，这里是我的http://try.jquery.com/学习笔记：

这次来学习操作各种css。

主要对这段html元素进行操作。

<div id="all-tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="tour usa">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <span class="per-night"><span class="price">$275</span>/night</span>
      <button class="book">Book Now</button>
      <ul class="photos">
        <li>
          <img src="/assets/photos/newyork1.jpg">
          <span>Notre Dame de Paris</span>
        </li>
      </ul>
    </li>
    <li class="tour france" data-discount="99">
      <h2>Paris, France</h2>
      <span class="details">$1,499 for 5 nights</span>
      <span class="per-night"><span class="price">$300</span>/night</span>
      <button class="book">Book Now</button>
      <ul class="photos">
        <li>
          <img src="/assets/photos/paris3.jpg">
          <span>Brooklyn Bridge</span>
        </li>
      </ul>
    </li>
    <li class="tour uk" data-discount="149">
      <h2>London, UK</h2>
      <span class="details">$2,199 for 5 nights</span>
      <span class="per-night"><span class="price">$440</span>/night</span>
      <button class="book">Book Now</button>
      <ul class="photos">
        <li>
          <img src="/assets/photos/london.jpg">
          <span>Tower of London</span>
        </li>
      </ul>
    </li>
  </ul>
</div>

修改背景色

Let's try to make the .tour elements on this page stand out a bit more. Inside our event handler for the mouseenter event, set the background-color to #252b30 using the css() method.

要求把tour突显出来，用mouseenter事件，给这个属性添加背景色。
在app.js中，添加这样的代码：

$(document).ready(function() {
  $('.tour').on('mouseenter', function() {
    $(this).css('background-color','#252b30');
  });
});

修改字体

Let's set the font-weight to bold as well by passing in a JavaScript object to the css() method.
我先这样写了，然后得到了一大大的红色警告！

    $(this).css('font-weight', 'bold');

那么怎么改呢？
其实这里在引导我们往最高效和正确的道路上走，就是用js的对象当成参数，然后用css调用。
所以与上面的背景色一起，改成这样子就好了。

    $(this).css({'background-color':'#252b30',
                 'font-weight':'bold'});

显示隐藏属性

Let's see what the tour page would look like if we showed the .photos on mouseenter as well. Try using the show() method here to make it visible.

    $(this).find('.photos').show();

操作高亮的css样式

直接用js写一堆css还是比较费劲，所以把css都提出去，单独写css文件，然后用js来调用，才是更科学的做法。比如用addClass，removeClass，toggleClass.

  $('.tour').on('mouseover', function(){
    $(this).addClass('highlight');
  });
  $('.tour').on('mouseleave', function(){
    $(this).removeClass('highlight');
  });

添加动画，让画面跳一跳，隐身，或者转个角度

先记下来这个价格歪歪悬挂的效果吧。很好玩！

.per-night {
    opacity: 0;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    position: absolute;
    top: 0px;
    right: -13px;
}

效果图：

When the mouse first goes over the .tour element, we need to show the price per night, .per-night, and to make it stand out. Let's animate() the opacity to be 1 in our same event handler. This allows us to fade the element in.

    $(this).find('.per-night').animate({'opacity':'1'});

The price per night will now fade, but let's make it move a little as well. We can't use slideDown() for this with our animate() call, though. When the mouseenter event is triggered, animate() the top property to -14px in order to move it up a bit.
注意这里写成js对象的格式！

    $(this).find('.per-night').animate({'opacity':'1',
                                                            'top':'-14px'});

给动画加速！

Let's speed it up to run in 200ms using the 'fast' shorthand.

其实就是animate的第二个参数。可以写数字的毫秒：200，400，600之类的。其中，200和600有快捷方式，jQuery帮我们用fast和slow来表示了。如下代码所示：

    $(this).find('.per-night').animate({'opacity':'1',
                                                            'top':'-14px'}, 'fast');

动画出现了再打回原型

$(document).ready(function() {
  $('.tour').on('mouseenter', function() {
    $(this).addClass('highlight');
    $(this).find('.per-night').animate({'top': '-14px', 'opacity': '1'}, 'fast');
  });
  $('.tour').on('mouseleave', function() {
    $(this).removeClass('highlight');
    $(this).find('.per-night').animate({'top':'0px',
                                        'opacity':'0'}, 'fast');
  });
});