Question

我想在我们的读取更多/更少的代码中添加一个annimation。所以这是开放的。

我的JQuery代码目前是：

$(document).ready(function(){
    $('.service-info').hide();
      $('.read-more').click(function(){
            $(this).siblings('.service-info').show();
            $(this).hide();
            $(this).parent().find('.read-less').show();
        })
      $('.read-less').click(function(){
        $(this).siblings('.service-info').hide();
        $(this).hide();
        $(this).parent().find('.read-more').show();
      })
  });

JSFiddle：https://jsfiddle.net/2bdto5fb/

我怎样才能做到这一点？

Answer 1

使用slideDown()和slideUp()，如下所示。

import React from 'react';
import {Component} from 'react';

const Message = (props) =>
{
    const Enum = require('node-enumjs');

    var Days = ({
        constants: {
            Monday: {
                say1() {
                    return 'mondays are bad!';
                }
            },
            Tuesday: {
                say: function () {
                    return this.name() + "s are ok...";
                }
            },
            Wednesday: {
                say: function () {
                    return this.name() + " is the middle of the week...";
                }
            }
        }
    })
}

export default Message;

from Message component i have access to say() inside monday.

import React from 'react';
import {Component} from 'react';
import Message from '../../../message';

export default class Content extends Component {
    sai() {
        return(
        <div>
            <h1>{Message.Monday.say1()}</h1>
            <h1>{Message.Monday.say2()}</h1>
        </div>
    )}
    render() {
        return (
            <div className="page-title">
                <center> Content </center>
                <button name="press" onClick = {this.sai}>press</button>
            </div>

        );
    }
}

<强> UPDATED FIDDLE

Answer 2

我的建议是使用slidetoggle并简化代码：

$(function () {
  $('.service-info').hide();
  $('.read-more, .read-less').click(function(e){
    $(this).hide();
    $(this).parent().find('.read-less, .service-info').slideToggle("slow");
  })
});

.read-less {
  display: none;
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<h2>Lorem ipsum</h2>

<p class="intro">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
    ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>

<a href="#" class="read-more">Read more</a>

<div class="service-info">

    <h3>Lorem Ipsum</h3>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
        sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
        nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
        aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
        felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
        eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
        dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>

</div>
<a href="#" class="read-less">Read less</a>

Animate读取更多/更少的JQuery

2 个答案: